Fix: v-model not working in Vue 3 Error

The ‘v-model not working in Vue 3’ is a common issue that occurs when the two-way data binding mechanism fails to function properly. This problem typically manifests when input values don’t update the bound data or when component events aren’t properly handled in Vue 3’s Composition API.

This comprehensive guide explains what causes this issue, why it happens, and provides multiple solutions to fix it in your Vue 3 projects with clean code examples and directory structure.

---

What is the v-model Issue in Vue 3?

The “v-model not working in Vue 3” issue occurs when:

• Input values don’t update the bound data property
• Component events aren’t properly handled
• Custom v-model implementations fail
• Reactive data isn’t properly synchronized
• Form inputs don’t reflect changes in the component state

Common Error Manifestations:

• Input fields don’t update when typing
• Data property doesn’t change when input value changes
• v-model on custom components doesn’t work
• Two-way binding fails in Composition API
• Form data isn’t properly synchronized

---

Understanding the Problem

Vue 3 introduced changes to how v-model works, especially with custom components. The main differences include:

• Custom components now use modelValue prop and update:modelValue event
• Multiple v-model bindings are supported
• Composition API requires different handling
• Event naming conventions have changed

Typical Vue 3 Project Structure:

my-vue3-app/
├── package.json
├── vite.config.js
├── src/
│   ├── main.js
│   ├── App.vue
│   ├── components/
│   │   ├── InputComponent.vue
│   │   └── CustomInput.vue
│   ├── composables/
│   │   └── useForm.js
│   ├── assets/
│   └── styles/
│       └── main.css
└── public/

---

Solution 1: Use modelValue and update:modelValue in Custom Components

The most common cause is incorrect custom component v-model implementation.

❌ Without Proper Custom Component:

<!-- src/components/CustomInput.vue - ❌ Wrong implementation -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
    type="text"
  >
</template>

<script setup>
// ❌ Vue 2 style - doesn't work in Vue 3
defineProps(['value'])
defineEmits(['input'])
</script>

✅ With Proper Vue 3 Implementation:

CustomInput.vue:

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

<script setup>
// ✅ Vue 3 v-model implementation
defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

defineEmits(['update:modelValue'])
</script>

<style scoped>
.custom-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
</style>

---

Solution 2: Use v-model in Parent Component

Properly use v-model with custom components in parent components.

❌ Without Proper Parent Usage:

<!-- Parent component - ❌ Wrong usage -->
<template>
  <div>
    <!-- ❌ This won't work properly -->
    <CustomInput :value="inputValue" @input="inputValue = $event" />
  </div>
</template>

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

const inputValue = ref('')
</script>

✅ With Proper Parent Usage:

<template>
  <div>
    <!-- ✅ Proper v-model usage -->
    <CustomInput v-model="inputValue" />
    <p>Current value: {{ inputValue }}</p>
  </div>
</template>

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

const inputValue = ref('')
</script>

---

Solution 3: Use Composition API with Refs

Properly handle v-model with Composition API and reactive references.

CompositionAPIExample.vue:

<template>
  <div class="composition-example">
    <h2>Composition API v-model Example</h2>
    
    <div class="form-group">
      <label>Name:</label>
      <input v-model="name" type="text" placeholder="Enter name">
    </div>
    
    <div class="form-group">
      <label>Email:</label>
      <input v-model="email" type="email" placeholder="Enter email">
    </div>
    
    <div class="form-group">
      <label>Message:</label>
      <textarea v-model="message" placeholder="Enter message"></textarea>
    </div>
    
    <div class="form-group">
      <label>Agree to terms:</label>
      <input v-model="agreed" type="checkbox">
    </div>
    
    <div class="form-group">
      <label>Gender:</label>
      <select v-model="gender">
        <option value="">Select gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Skills:</label>
      <div>
        <label v-for="skill in skillsList" :key="skill">
          <input 
            type="checkbox" 
            :value="skill" 
            v-model="selectedSkills"
          >
          {{ skill }}
        </label>
      </div>
    </div>
    
    <div class="preview">
      <h3>Current Values:</h3>
      <p>Name: {{ name }}</p>
      <p>Email: {{ email }}</p>
      <p>Message: {{ message }}</p>
      <p>Agreed: {{ agreed }}</p>
      <p>Gender: {{ gender }}</p>
      <p>Skills: {{ selectedSkills.join(', ') }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// ✅ Use ref for individual values
const name = ref('')
const email = ref('')
const message = ref('')
const agreed = ref(false)
const gender = ref('')
const selectedSkills = ref([])

// ✅ Use reactive for form objects
const form = reactive({
  name: '',
  email: '',
  message: ''
})

const skillsList = ['JavaScript', 'Vue', 'React', 'Node.js', 'Python']
</script>

<style scoped>
.composition-example {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group textarea {
  height: 80px;
  resize: vertical;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 5px;
}

.preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>

---

Solution 4: Handle Multiple v-model Bindings

Use multiple v-model bindings for complex components.

MultiModelComponent.vue:

<template>
  <div class="multi-model">
    <h3>Multiple v-model Example</h3>
    
    <CustomForm 
      v-model:name="formData.name"
      v-model:email="formData.email"
      v-model:age="formData.age"
    />
    
    <div class="preview">
      <h4>Form Data:</h4>
      <p>Name: {{ formData.name }}</p>
      <p>Email: {{ formData.email }}</p>
      <p>Age: {{ formData.age }}</p>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import CustomForm from './CustomForm.vue'

const formData = reactive({
  name: '',
  email: '',
  age: 0
})
</script>

CustomForm.vue:

<template>
  <div class="custom-form">
    <div class="form-field">
      <label>Name:</label>
      <input 
        :value="name" 
        @input="$emit('update:name', $event.target.value)"
        type="text"
        placeholder="Enter name"
      >
    </div>
    
    <div class="form-field">
      <label>Email:</label>
      <input 
        :value="email" 
        @input="$emit('update:email', $event.target.value)"
        type="email"
        placeholder="Enter email"
      >
    </div>
    
    <div class="form-field">
      <label>Age:</label>
      <input 
        :value="age" 
        @input="$emit('update:age', Number($event.target.value))"
        type="number"
        placeholder="Enter age"
      >
    </div>
  </div>
</template>

<script setup>
// ✅ Define multiple model props
defineProps({
  name: {
    type: String,
    default: ''
  },
  email: {
    type: String,
    default: ''
  },
  age: {
    type: [Number, String],
    default: 0
  }
})

// ✅ Define multiple update events
defineEmits(['update:name', 'update:email', 'update:age'])
</script>

<style scoped>
.custom-form {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
}

.form-field {
  margin-bottom: 10px;
}

.form-field label {
  display: block;
  margin-bottom: 5px;
}

.form-field input {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>

---

Solution 5: Use Computed Properties with Getters and Setters

Handle complex v-model scenarios with computed properties.

ComputedModelExample.vue:

<template>
  <div class="computed-model">
    <h3>Computed v-model Example</h3>
    
    <div class="form-group">
      <label>Full Name:</label>
      <input v-model="fullName" type="text" placeholder="First Last">
    </div>
    
    <div class="form-group">
      <label>First Name:</label>
      <input v-model="firstName" type="text" readonly>
    </div>
    
    <div class="form-group">
      <label>Last Name:</label>
      <input v-model="lastName" type="text" readonly>
    </div>
    
    <div class="preview">
      <p>First: {{ firstName }}</p>
      <p>Last: {{ lastName }}</p>
      <p>Full: {{ fullName }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('')
const lastName = ref('')

// ✅ Computed property with getter and setter for v-model
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`.trim()
  },
  set(value) {
    const [first = '', last = ''] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
})
</script>

<style scoped>
.computed-model {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.preview {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}
</style>

---

Solution 6: Handle Async Data with v-model

Properly handle v-model with async data loading.

AsyncDataExample.vue:

<template>
  <div class="async-data">
    <h3>Async Data v-model Example</h3>
    
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else>
      <div class="form-group">
        <label>User Name:</label>
        <input 
          v-model="user.name" 
          type="text" 
          :disabled="saving"
          placeholder="Enter name"
        >
      </div>
      
      <div class="form-group">
        <label>Email:</label>
        <input 
          v-model="user.email" 
          type="email" 
          :disabled="saving"
          placeholder="Enter email"
        >
      </div>
      
      <button @click="saveUser" :disabled="saving">
        {{ saving ? 'Saving...' : 'Save' }}
      </button>
      
      <div class="preview">
        <h4>Current User:</h4>
        <p>Name: {{ user.name }}</p>
        <p>Email: {{ user.email }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const user = reactive({
  name: '',
  email: ''
})

const loading = ref(false)
const saving = ref(false)
const error = ref(null)

onMounted(async () => {
  await loadUserData()
})

const loadUserData = async () => {
  loading.value = true
  error.value = null
  
  try {
    // ✅ Simulate async data loading
    const userData = await fetchUserData()
    user.name = userData.name
    user.email = userData.email
  } catch (err) {
    error.value = 'Failed to load user data'
    console.error(err)
  } finally {
    loading.value = false
  }
}

const saveUser = async () => {
  saving.value = true
  error.value = null
  
  try {
    await saveUserData(user)
    alert('User saved successfully!')
  } catch (err) {
    error.value = 'Failed to save user data'
    console.error(err)
  } finally {
    saving.value = false
  }
}

// ✅ Mock async functions
const fetchUserData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'John Doe', email: 'john@example.com' })
    }, 1000)
  })
}

const saveUserData = (userData) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.1 // 90% success rate
      if (success) {
        resolve(userData)
      } else {
        reject(new Error('Save failed'))
      }
    }, 500)
  })
}
</script>

<style scoped>
.async-data {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.loading, .error {
  text-align: center;
  padding: 20px;
}

.error {
  color: red;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.preview {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}
</style>

---

Working Code Examples

Complete Form Example with Validation:

<template>
  <div class="form-example">
    <h2>Complete Form Example</h2>
    
    <form @submit.prevent="handleSubmit" class="form">
      <div class="form-group">
        <label for="username">Username:</label>
        <input 
          id="username"
          v-model="form.username"
          type="text"
          :class="{ error: errors.username }"
          placeholder="Enter username"
        >
        <div v-if="errors.username" class="error-message">
          {{ errors.username }}
        </div>
      </div>
      
      <div class="form-group">
        <label for="email">Email:</label>
        <input 
          id="email"
          v-model="form.email"
          type="email"
          :class="{ error: errors.email }"
          placeholder="Enter email"
        >
        <div v-if="errors.email" class="error-message">
          {{ errors.email }}
        </div>
      </div>
      
      <div class="form-group">
        <label for="password">Password:</label>
        <input 
          id="password"
          v-model="form.password"
          type="password"
          :class="{ error: errors.password }"
          placeholder="Enter password"
        >
        <div v-if="errors.password" class="error-message">
          {{ errors.password }}
        </div>
      </div>
      
      <div class="form-group">
        <label>
          <input 
            v-model="form.subscribe" 
            type="checkbox"
          >
          Subscribe to newsletter
        </label>
      </div>
      
      <div class="form-group">
        <label>Role:</label>
        <select v-model="form.role">
          <option value="">Select role</option>
          <option value="user">User</option>
          <option value="admin">Admin</option>
          <option value="moderator">Moderator</option>
        </select>
      </div>
      
      <button 
        type="submit" 
        :disabled="!isFormValid || submitting"
        class="submit-btn"
      >
        {{ submitting ? 'Submitting...' : 'Submit' }}
      </button>
    </form>
    
    <div class="preview">
      <h3>Form Data:</h3>
      <pre>{{ JSON.stringify(form, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const form = reactive({
  username: '',
  email: '',
  password: '',
  subscribe: false,
  role: ''
})

const errors = reactive({})
const submitting = ref(false)

const validateForm = () => {
  let isValid = true
  
  // Clear previous errors
  Object.keys(errors).forEach(key => delete errors[key])
  
  // Validate username
  if (!form.username.trim()) {
    errors.username = 'Username is required'
    isValid = false
  } else if (form.username.length < 3) {
    errors.username = 'Username must be at least 3 characters'
    isValid = false
  }
  
  // Validate email
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!form.email.trim()) {
    errors.email = 'Email is required'
    isValid = false
  } else if (!emailRegex.test(form.email)) {
    errors.email = 'Please enter a valid email'
    isValid = false
  }
  
  // Validate password
  if (!form.password) {
    errors.password = 'Password is required'
    isValid = false
  } else if (form.password.length < 6) {
    errors.password = 'Password must be at least 6 characters'
    isValid = false
  }
  
  return isValid
}

const isFormValid = computed(() => {
  return !Object.keys(errors).length && 
         form.username.trim() && 
         form.email.trim() && 
         form.password
})

const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }
  
  submitting.value = true
  
  try {
    // ✅ Simulate form submission
    await submitForm(form)
    alert('Form submitted successfully!')
    // Reset form after successful submission
    Object.keys(form).forEach(key => {
      if (typeof form[key] === 'boolean') {
        form[key] = false
      } else {
        form[key] = ''
      }
    })
  } catch (error) {
    console.error('Form submission error:', error)
    alert('Failed to submit form')
  } finally {
    submitting.value = false
  }
}

// ✅ Mock form submission
const submitForm = (formData) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.2 // 80% success rate
      if (success) {
        resolve(formData)
      } else {
        reject(new Error('Submission failed'))
      }
    }, 1000)
  })
}
</script>

<style scoped>
.form-example {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group input.error {
  border-color: #ff4444;
}

.error-message {
  color: #ff4444;
  font-size: 0.875rem;
  margin-top: 5px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.preview pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.875rem;
}
</style>

---

Best Practices for v-model

1. Always Use Ref or Reactive for v-model

// ✅ Use ref for individual values
const inputValue = ref('')

// ✅ Use reactive for objects
const form = reactive({
  name: '',
  email: ''
})

2. Validate Data Before Processing

// ✅ Always validate v-model data
const validateInput = (value) => {
  if (!value.trim()) {
    return 'Field is required'
  }
  return null
}

3. Handle Async Data Properly

// ✅ Handle async data loading with proper state management
const loading = ref(false)
const data = ref('')

4. Use TypeScript for Type Safety

// ✅ Use TypeScript for better type safety
interface FormData {
  name: string
  email: string
}

---

Debugging Steps

Step 1: Check Data Reactivity

# Verify data is properly reactive
# Check if ref or reactive is used correctly

Step 2: Verify Event Handling

// Add debugging to see if events are firing
const handleInput = (event) => {
  console.log('Input event:', event.target.value)
  // Update your reactive data here
}

Step 3: Use Vue DevTools

# Install Vue DevTools browser extension
# Inspect component data and v-model bindings

Step 4: Test Component Communication

<!-- Add temporary debugging -->
<template>
  <div>
    <input v-model="value" />
    <p>Debug: {{ value }}</p> <!-- Temporary debug output -->
  </div>
</template>

---

Common Mistakes to Avoid

1. Not Using Ref or Reactive

// ❌ Don't use regular variables with v-model
let inputValue = '' // ❌ Not reactive

// ✅ Use reactive references
const inputValue = ref('') // ✅ Reactive

2. Incorrect Custom Component Implementation

<!-- ❌ Wrong custom component implementation -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<!-- ✅ Correct Vue 3 implementation -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

3. Forgetting to Define Emits

// ❌ Missing emits definition
defineProps(['modelValue'])

// ✅ Include emits definition
defineProps(['modelValue'])
defineEmits(['update:modelValue'])

4. Not Handling Async Data Properly

// ❌ Not waiting for async data
onMounted(() => {
  loadUserData() // ❌ Data might not be loaded when v-model tries to access it
  console.log(user.name) // ❌ Might be undefined
})

---

Performance Considerations

1. Optimize Input Events

// ✅ Use lazy modifier for performance
<input v-model.lazy="value" />

// ✅ Use debounce for expensive operations
<input v-model="value" @input="debouncedUpdate" />

2. Batch Updates When Possible

// ✅ Batch multiple updates
const updateMultiple = (data) => {
  Object.assign(form, data)
}

---

Security Considerations

1. Sanitize User Input

// ✅ Always sanitize input before processing
const sanitizeInput = (value) => {
  return value.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
}

2. Validate Input Types

// ✅ Validate input types and formats
const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return regex.test(email)
}

---

Testing v-model Functionality

1. Unit Test v-model Binding

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('v-model functionality', () => {
  it('should update data when input changes', async () => {
    const wrapper = mount(MyComponent)
    const input = wrapper.find('input')
    
    await input.setValue('test value')
    
    expect(wrapper.vm.inputValue).toBe('test value')
  })
  
  it('should update input when data changes', async () => {
    const wrapper = mount(MyComponent)
    wrapper.vm.inputValue = 'new value'
    await wrapper.vm.$nextTick()
    
    expect(wrapper.find('input').element.value).toBe('new value')
  })
})

2. Test Custom Component v-model

it('should handle v-model on custom component', async () => {
  const wrapper = mount(ParentComponent)
  const customInput = wrapper.findComponent(CustomInput)
  
  await customInput.setValue('test')
  
  expect(wrapper.vm.value).toBe('test')
})

---

Alternative Solutions

1. Use v-model with Modifiers

<!-- Use lazy, trim, or number modifiers -->
<input v-model.trim="value" />
<input v-model.number="age" />
<input v-model.lazy="value" />

2. Implement Custom Input Component

<!-- Create a wrapper component with proper v-model support -->
<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
    v-bind="$attrs"
  >
</template>

---

Migration Checklist

• Verify all v-model bindings use reactive references
• Check custom components implement modelValue/update:modelValue
• Test async data loading with v-model
• Validate form data properly
• Use Vue DevTools to inspect v-model bindings
• Run unit tests for v-model functionality
• Update documentation for team members

---

Conclusion

The ‘v-model not working in Vue 3’ issue is typically caused by incorrect implementation of Vue 3’s v-model changes, improper reactive data handling, or incorrect custom component setup. By following the solutions provided in this guide—whether through proper custom component implementation, correct Composition API usage, or proper async data handling—you can ensure your Vue 3 applications have reliable two-way data binding.

The key is to understand Vue 3’s v-model changes, use reactive references properly, and implement custom components with the correct prop and event names. With proper v-model implementation, your Vue 3 applications will have seamless two-way data binding and provide an excellent user experience.

Remember to always use reactive data, validate input properly, handle async operations carefully, and test your v-model functionality thoroughly to ensure reliable form handling throughout your application.