Description
Version
3.0.0-rc.9
Reproduction link
https://jsbin.com/wukoruyuru/edit?html,js,output
Steps to reproduce
<div id="app">
<component-a v-model="myData"></component-a>
<span>Data: {{ myData }}</span>
</div>const app = Vue.createApp({
data() {
return {
myData: 'initial'
}
}
});
app.component('component-a', {
props: {
modelValue: String
},
template: `
<component-b
:modelValue="modelValue"
@update:modelValue="$emit('update:modelValue', 'from A')"
/>`
})
app.component('component-b', {
props: {
modelValue: String
},
template: `
<button
@click="$emit('update:modelValue', 'from B')"
>Click B</button>`
})
app.mount('#app')What is expected?
modelValue props (maybe props with the same name) should be isolated in each component.
What is actually happening?
There seems to be a different behaviour in Vue 3 compared to Vue 2. When passing data to a v-model of a component (Component A), then passing it to another component (Component B), the data does not get modified/emitted in the first one (Component A).
Please see the example.
I expect the myData to be ‘from A’ (because it should be overwritten in Component A), but instead it results in ‘from B’. Even if I remove the $emit-Line in Component A I still get the same result. This is different from Vue2, is this the intended behaviour?
When I replace modelValue in ComponentB to let’s say modelValue1 and set its other references stuff then the sample is working like expected.
So when using a prop “modelValue” in a component and also “modelValue” in one of its sub components then the “bug” appears…