Vue version

3.2.13

Link to minimal reproduction

https://github.com/dxvladislavvolkov/vuevmodel

Steps to reproduce

1. Clone repo
2. Run npm i
3. Run npm run serve
4. Open devtools and console tab
5. You will see a warning: (deprecation COMPONENT_V_MODEL) Component declares "modelValue" prop, which is Vue 3 usage, but is running under Vue 2 compat v-model behavior. You can opt-in to Vue 3 behavior on a per-component basis with compatConfig: { COMPONENT_V_MODEL: false }.

What is expected?

No the warning. Looks like my component is correct.

What is actually happening?

I get the warning.

System Info

No response

Any additional comments?

No response

Your code is correct for Vue 3. But you are running it in Vue 2 compat mode. in Vue 2, v-model requires a value prop and emits an input event.

The error message is telling you how to disable Vue 2 compat for v-model as you are already using Vue 3 syntax.

<template>
  <div class="content-block">
    <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
  </div>
</template>
<script>
export default {
  compatConfig: {
    COMPONENT_V_MODEL: false
    // or, for full vue 3 compat in this component:
    MODE: 3,
  },
  props: {
    modelValue: String
  },
  emits: ['update:modelValue']
}
</script>

https://v3-migration.vuejs.org/migration-build.html#per-component-config

@LinusBorg But if I use UI library for vue 3 and I don't have the opportunity to set compatConfig inside the component? In this case, how can I fix the warning?

@LinusBorg But if I use UI library for vue 3 and I don't have the opportunity to set compatConfig inside the component? In this case, how can I fix the warning?

Update the library, or switch to something else

Hi @dxvladislavvolkov, I just had the same issue as you. I fixed it in the following way: