[Vue] Vue 3.4 defineModel

Code

📁 /src/App.vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <ChildComponent v-model="text" />
  <p>{{ text }}</p>
</template>

📁 /src/components/ChildComponent.vue

<script setup lang="ts">
const model = defineModel<string>()

const update = ($event: Event) => {
  model.value = ($event.target as HTMLInputElement).value
}
</script>

<template>
  <input v-model="model" />
  <button @click="model = ''">Reset</button>
</template>