Vue3 v-modelの仕様

v-modelに使用するデフォルトのprop名とイベントが変更になっています

Vue2.x

SomeComponent.vue

// valueのpropで受け取り
props: [value]
// onInputで返却
this.$emit('input', updatedValue)

<some-component v-model="hoge" />
// ↑は↓と等価
<some-component :value="hoge" onInput="(val) => hoge = val"/>

Vue3

SomeComponent.vue

// modelValueのpropで受け取り
props: [modelValue]
// onUpdate:modelValueで返却
context.emit('update:modelValue', updatedValue)

<some-component v-model="hoge" />
// ↑は↓と等価
<some-component :modelValue="hoge" onUpdate:modelValue="(val) => hoge = val"/>

Vue3別例

SomeComponent.vue

// modelValue以外もつかえる
props: [foobar]
// onUpdate:propnameで返却
context.emit('update:foobar', updatedValue)

// modelValue以外のpropにv-modelで双方向バインドする場合は明示が必要
<some-component v-model:foobar="hoge" />
// ↑は↓と等価
<some-component :foobar="hoge" onUpdate:foobar="(val) => hoge = val"/>

ref https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md