vue.js unable to correctly bind v-model to object value

Question

Is there any reason why these 2 v-model bindings below would behave differently?

// component that uses FormExample
<script setup>
const fullName = someObject.fullName
</script>
<template>
 // this works
 <InputText v-model="fullName"/>
 // this does not work
 <InputText v-model="someObject.fullName"/>
</template>

• yoduh: The example is not runnable. how is someObject defined? what is the InputText component? whatever is assigned to v-model should be defined as reactive... Try making your minimal example using https://play.vuejs.org/

Answer 1

Found a solution.

Issue is that the setup function doesn't unwrap refs recursively.

Therefore, you need to do it yourself.

<InputText v-model="someObject.fullName.value"/>