Does defineModel() work with object props

[Jack8450]

Examples show only usage with primitive types, how will it work with object props?
I test with the following example,

Parent.vue

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref({
  'text': 'jack'
})

const valueUpdated = (newValue) => {
  console.log('parent msg changed', newValue);
}

</script>

<template>
  <h1>{{ msg.text }}</h1>
  <Child  
    :value="msg" @update:value="valueUpdated" 
  />
</template>

Child.vue

<script setup>
const model = defineModel("value");

const manualChangeValue = () => {
  model.value.text += '1';
}
</script>

<template>
  <input v-model="model.text">
  <button @click="manualChangeValue">add1</button>
</template>

defineModel work with object props. but i have the following question:

1. when call manualChangeValue method in child.vue, @update:value in parent.vue not trigger.
2. i want to know weather it conflict Vue one-way data flow. if bind primitive types, no problem, but if bind object or array types, model.value in 'Child.vue' === msg.value in 'Parent.vue'
   when chang model.value in 'Child.vue'

const manualChangeValue = () => {
  model.value.text += '1';
}

vue direct change the msg.value.text in 'Parent.vue'
3. defineModel for object props is suggested.

中文(translate for chinese)

1. 当在child.vue 中调用 manualChangeValue方法, parent.vue 中的“@update:value” 并没有被触发.
2. 是否违反单向数据流。如果绑定简单对象，没有问题，但是如果绑定Object数据类型，此时'Child.vue'中的model.value与'Parent.vue'中的msg.value 实际是同一个对象。
   当修改'Child.vue'中的model.value

const manualChangeValue = () => {
  model.value.text += '1';
}

vue 直接修改了 'Parent.vue' 中的msg.value.text
4. 官方是否推荐 使用defineModel绑定Object数据类型或者Array数据类型。

[Shyam-Chen]

It works for me.

<script lang="ts" setup>
const state = reactive({
  bubble: {
    message: '',
    files: [],
  },
});
</script>

<template>
  <ChatBubble v-model="state.bubble" />
</template>

type BubbleChatBox = {
  message: string;
  files: (File & { url?: string })[];
};

const defaultModel = defineModel<BubbleChatBox>({
  default: { message: '', files: [] },
});

[Jack8450]

i know it works, but if you change defaultModel.message in ChatBubble.vue, does it conflict Vue one-way data flow.
because （ChatBubble.vue）defaultModel === state(Parent), they are the same object.
you change the value in children vue component.

[silentmantra]

Mutating v-model does violate 1-way data flow. But Vue doesn't prevent this: https://vuejs.org/guide/components/props.html#mutating-object-array-props

So you should replaced with a copy rather than mutate.
But this could be expensive.
On the other hand I don't see much sense in 1-way data flow, v-model looks just a special property with 2-way data binding. Maybe it's just good to use to see which props could be mutated. Often I use provide/inject with 2-way binding. With reactivity there's no hard mutate anything since everything reacts to mutations properly