Model component with Vue3 Composition API in TypeScript

All we need is a modelValue prop, and a computed property to use as model where the set-method emits a “update:modelValue” event.

Example component:

<template>
  <label> <slot /> <input type="text" v-model="model" /> </label>
</template>

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

export default defineComponent({
  props: {
    modelValue: Object,
  },
  setup(props, { emit }) {
    const model = computed({
      get: () => props.modelValue,
      set: (value) => emit("update:modelValue", value),
    });

    return {
      model,
    };
  },
});
</script>

Example usage:

<template>
  <ModelPassthrough v-model="name" />
  <p>Value: {{ name }}</p>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ModelPassthrough from "../Components/ModelPassthrough.vue";

export default defineComponent({
  components: { ModelPassthrough },
  props: {
    modelValue: Object,
  },
  setup() {
    const name = ref("");
    return {
      name,
    };
  },
});
</script>