1---
2title: defineModel Default Value Can Cause Parent-Child Desync
3impact: HIGH
4impactDescription: Default values in defineModel don't sync back to parent, causing state inconsistency
5type: capability
6tags: [vue3, v-model, defineModel, components, props, two-way-binding]
7---
8 
9# defineModel Default Value Can Cause Parent-Child Desync
10 
11**Impact: HIGH** - When using `defineModel()` with a default value and the parent doesn't provide a value, the parent and child components will have different values. The parent's ref stays `undefined` while the child uses the default, breaking the two-way binding contract.
12 
13This subtle bug can cause confusing behavior where the parent component shows one value while the child shows another, and updates may not propagate correctly.
14 
15## Task Checklist
16 
17- [ ] Always provide initial values from the parent when using v-model
18- [ ] Don't rely on defineModel defaults as the primary source of truth
19- [ ] If defaults are needed, also set them in the parent component
20- [ ] Test components with and without v-model props provided
21 
22**Problem - Parent and child out of sync:**
23```html
24<!-- ChildComponent.vue -->
25<script setup>
26// Default value of 1 if parent doesn't provide value
27const model = defineModel({ default: 1 })
28</script>
29 
30<template>
31  <input v-model="model" type="number">
32  <!-- Shows: 1 (from default) -->
33</template>
34```
35 
36```html
37<!-- ParentComponent.vue -->
38<script setup>
39import { ref } from 'vue'
40import ChildComponent from './ChildComponent.vue'
41 
42// PROBLEM: Parent ref is undefined, not synced with child's default
43const myValue = ref()  // undefined
44</script>
45 
46<template>
47  <ChildComponent v-model="myValue" />
48 
49  <!-- DESYNC: Child shows 1, but parent shows undefined -->
50  <p>Parent value: {{ myValue }}</p>  <!-- Shows: undefined -->
51 
52  <!-- Even after child changes value, parent may not update correctly -->
53</template>
54```
55 
56**Solution 1 - Always provide initial value from parent:**
57```html
58<!-- ParentComponent.vue -->
59<script setup>
60import { ref } from 'vue'
61import ChildComponent from './ChildComponent.vue'
62 
63// CORRECT: Parent provides the initial value
64const myValue = ref(1)  // Match the expected default
65</script>
66 
67<template>
68  <ChildComponent v-model="myValue" />
69  <p>Parent value: {{ myValue }}</p>  <!-- Shows: 1, stays in sync -->
70</template>
71```
72 
73**Solution 2 - Child emits default on mount (if parent control not possible):**
74```html
75<!-- ChildComponent.vue -->
76<script setup>
77import { onMounted } from 'vue'
78 
79const model = defineModel({ default: 1 })
80 
81// Sync default value back to parent on mount
82onMounted(() => {
83  if (model.value === 1) {  // Is using default
84    // Force emit to sync parent
85    model.value = 1
86  }
87})
88</script>
89 
90<template>
91  <input v-model="model" type="number">
92</template>
93```
94 
95**Solution 3 - Use required prop or explicit undefined handling:**
96```html
97<!-- ChildComponent.vue -->
98<script setup>
99import { computed } from 'vue'
100 
101// Mark as required - TypeScript will warn if not provided
102const model = defineModel({ required: true })
103 
104// Or handle undefined explicitly
105const safeModel = computed({
106  get: () => model.value ?? 1,  // Provide fallback
107  set: (val) => { model.value = val }
108})
109</script>
110 
111<template>
112  <input v-model="safeModel" type="number">
113</template>
114```
115 
116**Best Practice - Document expected initial values:**
117```html
118<!-- ChildComponent.vue -->
119<script setup>
120/**
121 * @prop modelValue - The numeric value (parent should initialize to 1 or desired default)
122 */
123const model = defineModel({
124  type: Number,
125  default: 1,
126  // Adding validator helps catch issues in development
127  validator: (value) => {
128    if (value === undefined) {
129      console.warn('ChildComponent: v-model value is undefined. Provide initial value from parent.')
130    }
131    return true
132  }
133})
134</script>
135```
136 
137## Reference
138- [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)
139- [Vue School - defineModel Guide](https://vueschool.io/articles/vuejs-tutorials/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3/)
140