Two Way Binding in Vue3

<script lang="ts" setup>
const name = defineModel<string>("name");
const age = defineModel<number>("age");

const updateAgeInChild = () => {
  ++age.value;
};
</script>

<template>
  <h1>Child:</h1>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <input type="text" v-model="name" />
  <button @click="updateAgeInChild()">Add age in Child</button>
</template>Copy

<script lang="ts" setup>
import { ref } from "vue";
import Child from "./Child.vue";

const name = ref("BlockLune");
const age = ref(0);

const updateAgeInParent = () => {
  ++age.value;
};
</script>

<template>
  <Child v-model:name="name" v-model:age="age" />
  <h1>Parent:</h1>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <input type="text" v-model="name" />
  <button @click="updateAgeInParent">Add in Parent</button>
</template>Copy

<script setup>
import Parent from "./Parent.vue";
</script>

<template>
  <Parent />
</template>Copy