Subscribe on changes!

`v-model` warning when using computed property as a duplicate of prop in Vue 3.3.0-beta.1

avatar
Apr 24th 2023

Vue version

3.3.0-beta.1

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-kp9nxc?file=src%2FApp.vue,src%2Fcomponents%2FTextField.vue&terminal=dev

Steps to reproduce

The following code snippet can be executed in Vue 3.2.47, even it's not recommended.

<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps<{ modelValue: string }>();
const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void;
}>();

const modelValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
</script>

<template>
  <div class="card">
    <input v-model="modelValue" type="text" />
  </div>
</template>

It defines a computed property modelValue that duplicates props, and uses modelValue computed property two-way binding with <input> in the <template>. In Vue 3.2.47, no warning is thrown. However, in Vue 3.3.0-beta.1, a warning is displayed.

What is expected?

Although this is not a good practice, it should not throw a warning.

What is actually happening?

ζˆͺεœ– 2023-04-24 δΈ‹εˆ9 13 43

System Info

[plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.

Any additional comments?

I'm not sure if this was intended, if so please close this issue.