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는 사용자 정의 컴포넌트에서 폼 데이터의 양방향 바인딩을 구현하는 새로운 방식입니다.