There are more reactive options to choose from
When using the Composition API, we have two options to create reactive properties: ref() and reactive(). The first one returns an object with a .value property that is reactive. The second converts an object passed as an argument and returns the same object with reactive properties. Here is one example:
<script setup>
import {reactive, ref} from "vue"
const
data=reactive({name:"John", surname:"Doe"}),
person=ref({name: "Jane", surname:"Doe"})
// Then, to access the values in JavaScript
// Reactive object
data.name="Mary"
data.surname="Sue"
// Reactive ref
person.value.name="Emma"
person.value.surname="Smith"
</script>
<...
