タイトルにあるとおり、Vue2.7とVue3では似ているようで完全に機能がバックポートされているわけではないので一部使えないVue3の機能があります。
前提知識
v-modelはvalue
propsと@input
emitイベントを一つのディレクティブにまとめて双方向バインディングをするための省略記法、いわゆるシンタックスシュガーです。
問題
Vue >= 3
からはこのv-modelの記法が
プロパティ: value -> modelValue
イベント: input -> update:modelValue
に変わりました。https://v3.ja.vuejs.org/guide/migration/v-model.html
たしかにselectboxやswitch buttonなどでもイベントがinputという命名になるのは少し変な感じがするのでupdateにしたのは合理的ですね。
この内容はVue3のマイグレーションガイドでも大々的に「破壊的変更」であると明記されています。
Vue2.7からVue3の記法をサポートするよ〜みたいな情報を鵜呑みにしてしまっている人が多いと思いました。
内部のエコシステム自体は変わっておらず、実は拡張構文をVue2にバックポートしただけなので、それほど全ての機能をサポートしているわけでもないようですね。
Vue2リポジトリにその内容がissueとして建てられていました1
The main goal of v2.7 is not align with Vue 3 completely but only back port some of the useful features (not breaking changes) introduced in Vue 3. It should be compatible with Vue 2 for most cases.
要するにv2.7の主な目的は、Vue3に合わせることではなく、そのVue3へのマイグレーション段階として近い記法でかけるようにとバックポートしただけだということだそうです。
解決策
いままでのVue2の書き方の通りvalue/@inputを使いましょう。