`v-model` warning when using computed property as a duplicate of prop in Vue 3.3.0-beta.1
Vue version
3.3.0-beta.1
Link to minimal reproduction
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?
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.