Is this method recommended when making a custom form element in vue 3?

Question

CInput.vue

<template>
  <input v-model="modelValueC">
</template>

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

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Array, Date, Object, Number, null],
    default: null
  },
});
const modelValueC = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});
</script>

<style scoped>

</style>

Or need i make this <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> ?

Answer 1

These approaches are outdated. Use it defineModel():

/* App.vue */

<script setup>
import { ref } from 'vue';
import Input from './Input.vue';

const msg = ref('')
</script>

<template>
  <Input v-model="msg" />{{ msg }}
</template>

/* Input.vue */

<script setup>
const model = defineModel();
</script>

<template>
  <input v-model="model">
</template>

Vue SFC Playground