Vue.js における v-model と model-value のリアクティブ性の違い

Vue.js の v-model と model-value は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。

v-model は Vue.js が提供するシンタックスシュガーで、テンプレート内でフォームデータの双方向バインディングをより簡単に実現できます。フォーム要素で v-model を使用すると、要素の input または change イベントを自動的に監視し、フォーム要素の値を対応する Vue コンポーネントのデータに同期します。その逆も同様です。例：

<input v-model="message" />

これにより、フォーム要素の値と Vue インスタンス内の message データが双方向にバインドされます。ユーザーがフォーム要素に値を入力すると、message データが自動的に更新されます。message データに変更があると、フォーム要素内の値も自動的に更新されます。

model-value は Vue 3 で新たに追加されたプロパティで、カスタムコンポーネント内でフォームデータの双方向バインディングを実現するために使用されます。v-model とは異なり、model-value はディレクティブではなくプロパティであり、カスタムコンポーネントのオプションで設定する必要があります。例：

app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})

ここでは、my-component という名前のカスタムコンポーネントを定義し、その props に modelValue というプロパティを定義しています。コンポーネントのテンプレートでは、このプロパティを使用してフォーム要素の値をバインドすると同時に、フォーム要素の input イベントで update:modelValue というカスタムイベントを発生させ、入力された値を引数として親コンポーネントに渡しています。このカスタムコンポーネントを使用する際は、次のように v-model を使用してフォームデータの双方向バインディングを実現できます：

<my-component v-model="message" />

要するに、v-model は Vue.js でフォームデータの双方向バインディングを実現するために使用される一般的なディレクティブであり、model-value はカスタムコンポーネントでフォームデータの双方向バインディングを実現する新しい方法です。