Both v-model and model-value in Vue.js are directives used to implement two-way binding for form data.

v-model is syntactic sugar provided by Vue.js that allows developers to implement two-way binding for form data more conveniently in templates. When v-model is used on a form element, it automatically listens for the element's input or change event and synchronizes the form element's value with the corresponding Vue component data, and vice versa. For example:

<input v-model="message" />

This two-way binds the form element's value to the message data in the Vue instance. If the user enters a value in the form element, the message data is updated automatically; if the message data changes, the value in the form element is also updated automatically.

model-value is a property introduced in Vue 3 for implementing two-way binding of form data in custom components. Unlike v-model, model-value is not a directive but a property that needs to be configured in the options of a custom component. For example:

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

Here, a custom component named my-component is defined, and a property named modelValue is defined in its props. The component's template uses this property to bind the value of the form element, while triggering a custom event named update:modelValue on the form element's input event and passing the entered value as an argument to the parent component. When using this custom component, v-model can be used as follows to implement two-way binding for form data:

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

In summary, v-model is a commonly used directive in Vue.js for implementing two-way binding of form data, while model-value is a new way to implement two-way binding of form data in custom components.