How to Fix v-model Warning in Vue: Simple Solutions

To fix a v-model warning in Vue, ensure you use the correct syntax matching your Vue version and component setup. For Vue 3, use v-model:modelValue with custom components or fix the binding to a defined data property in Vue 2.

Why This Happens

This warning usually appears because Vue expects v-model to bind to a specific property or event, but the code either uses incorrect syntax or the component does not support v-model properly. For example, in Vue 3, v-model on custom components requires binding to modelValue and emitting update:modelValue. Using old syntax or missing these causes warnings.

vue

<template>
  <MyInput v-model="text" />
</template>

<script>
export default {
  data() {
    return { text: '' };
  },
  components: {
    MyInput: {
      props: ['value'],
      template: '<input :value="value" />'
    }
  }
}
</script>

Output

[Vue warn]: Component emitted event "update:modelValue" but it is neither declared as an emits option nor as an event listener attribute.

The Fix

Update your component to use modelValue as the prop and emit update:modelValue event. Then use v-model normally on the component. This matches Vue 3's expected pattern and removes the warning.

vue

<template>
  <MyInput v-model="text" />
</template>

<script>
export default {
  data() {
    return { text: '' };
  },
  components: {
    MyInput: {
      props: ['modelValue'],
      emits: ['update:modelValue'],
      template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />'
    }
  }
}
</script>

Output

An input box that updates the "text" data property without warnings.

Prevention

Always check your Vue version and follow the correct v-model syntax for that version. Use props and emits properly in custom components. Enable linting tools like eslint-plugin-vue to catch incorrect v-model usage early.

Related Errors

Other common errors include missing emits declaration for update:modelValue, binding v-model to a non-existent data property, or using v-model on native HTML elements incorrectly.

Key Takeaways

Use the correct v-model syntax matching your Vue version and component design.

Custom components must accept modelValue prop and emit update:modelValue event in Vue 3.

Enable Vue linting tools to catch v-model misuse early.

Always bind v-model to a defined reactive data property.

Check component emits and props to avoid warnings.