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>
<...
