El elemento de entrada personalizado de la API de Composición no actualiza el valor.

Pregunta

Estoy intentando crear un componente de entrada personalizado con la API de composición en Vue 3, pero cuando intento actualizar el valor con v-model, obtengo una cadena vacía en lugar del valor del evento y cuando reemplazo el componente de entrada personalizado Inputcon la entrada HTML predeterminada, el valor se actualiza como se espera.

Componente de entrada:

<template>
  <input
    :type="type"
    :id="name"
    :name="name"
    :placeholder="placeholder"
    class="input"
    v-model="modelValue"
  />
</template>

<script lang="ts">
import { computed } from 'vue';

export default {
  name: 'Input',
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: true,
    },
  },
  setup(props: { value: string }, { emit }) {
    const modelValue = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        emit('input', value);
      },
    });

<pre><code>return { modelValue };
</code></pre>

},
};
</script>

<p>HTML:</p>

<p><code>html
<form @submit.prevent="handleSubmit">
<Input :name="name" placeholder="Nombre*" v-model="name" />
<Button>Enviar</Button>
</form>
</code></p>

<p>Método setup:</p>

<p>“`js
setup() {
const name = ref(”);

function handleSubmit(data: Event) {
  console.log(data, name.value);
}

watch(name, (old, newValue) => {
  console.log(name, old, newValue);
});

return { name, handleSubmit };

},
“`