hrms-user/src/components/TestUpgrade.vue

<!-- Child.vue -->
<script setup lang="ts">
import { ref, watchEffect } from "vue";

const model = defineModel({ type: Number, required: true });
const total = defineModel("total", { type: Number, required: true });

const name = defineModel("firstname", { type: String, required: true });
const last = defineModel<string>("lastname", {});

// const [firstname, firstNameModifiers] = defineModel("firstName");
// const [lastName, lastNameModifiers] = defineModel("lastName", {
//   type: String,
//   required: true,
// });

watchEffect(() =>
  model.value === 3 ? console.log("yes") : console.log("not")
); // logs true

function update() {
  model.value++;
}
defineProps<{ name2: String }>();
</script>

<template>
  <div>Child model is: {{ model }}</div>
  {{ total }}
  <q-btn @click="update">Add +</q-btn>

  <q-separator />
  {{ name }} {{ last }}

  {{ name2 }}
</template>