From 6410dc0bf6894d9373309715c8a4ead87f987881 Mon Sep 17 00:00:00 2001 From: pcoterecollective <128399224+pcoterecollective@users.noreply.github.com> Date: Tue, 21 Jul 2026 11:14:25 -0400 Subject: [PATCH 1/2] docs(v-model): document factory-function defaults for objects/arrays --- src/guide/components/v-model.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 51c5fb4e23..9b42ffb34c 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -96,6 +96,16 @@ const model = defineModel({ required: true }) const model = defineModel({ default: 0 }) ``` +When the default value is an object or array, return it from a factory function, just as with [prop defaults](/guide/components/props#prop-validation). Otherwise every component instance that falls back to the default shares the **same** reference, and mutating the model in one instance leaks into the others: + +```js +// ❌ every instance shares one object +const model = defineModel({ default: {} }) + +// ✅ each instance gets a fresh object +const model = defineModel({ default: () => ({}) }) +``` + :::warning If you have a `default` value for `defineModel` prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's `myRef` is undefined, but the child's `model` is 1: From 3890fbd2ce2014df3739205268bd25809fc5d25c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre=20C=C3=B4t=C3=A9?= <128399224+pcoterecollective@users.noreply.github.com> Date: Sat, 8 Aug 2026 09:23:52 -0400 Subject: [PATCH 2/2] Update v-model.md Co-authored-by: Ben Hong --- src/guide/components/v-model.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 9b42ffb34c..a4861430c8 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -96,7 +96,9 @@ const model = defineModel({ required: true }) const model = defineModel({ default: 0 }) ``` -When the default value is an object or array, return it from a factory function, just as with [prop defaults](/guide/components/props#prop-validation). Otherwise every component instance that falls back to the default shares the **same** reference, and mutating the model in one instance leaks into the others: +When the default value is an object or array, it will be shared across all instances of the component because it shares the same reference. In other words, changing the model in one instance will affect the other instances. + +Similar to [prop defaults](/guide/components/props#prop-validation), if you want the component instances to have their own unique values, you need to return it from a factory function. ```js // ❌ every instance shares one object