vue3 有时候会不小心v-model传入reactive的值导致响应式更新失效

vue3 有时候会不小心v-model传入reactive的值导致响应式更新失效。
当父组件中传入一个响应式对象比如：

父组件：
const a = reactive({v:123,b:321})
<child v-model=a />
子组件：
const v = defineModel();
v.value = {v:111,b:222}

在上面状态下响应式更新会失败。

具体的原因，是v-model是个语法糖..

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>


<!-- Parent.vue -->
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

推荐团队沟通后使用ref作为v-model传递。如果使用watch则添加deep深度监听。

解决1：使用ref

解决2：使用reactive在包一层