v-model is not working in custom components #1556
Description
Version
3.0.0-beta.20
Reproduction link
https://codesandbox.io/s/confident-noether-6i1q7?file=/package.json
Steps to reproduce
Create a new project with the latest Vue.js version.
Create a custom component and add a v-model attribute,
emit a value, the value is not updated in the parent component.
Lets say we have a child component
<template>
<input :value="value" @input="emitUpdates">
</template>
<script>
export default {
props: ["value"],
setup(props, { emit }) {
function emitUpdates(event) {
emit("input", event.target.value);
}
return {
emitUpdates
};
}
};
</script>
And a parent component
<template>
<div>
<Input v-model="state.someText" type="text"/>
{{ state.someText }}
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
someText: "Hallo"
});
return {
state,
};
}
};
</script>
The value of state.someText should get updated if the input value is updated.
This is a working example in Vue2:
https://codesandbox.io/s/custom-input-component-v-model-23x1t
I don't know whether something is changed which is not documented or it is a bug.
What is expected?
The value in the parent component should be updated after emit("input", value) is called.
What is actually happening?
The value in the parent component is not updated after emit("input", value) is called.