hrms-user/src/modules/01_dashboard/views/test.vue

<script setup lang="ts">
import Child from "@/components/TestUpgrade.vue";
import { ref, computed, watchEffect } from "vue";

const count = ref<number>(0);
const total = ref<number>(0);
const first = ref<string>("firstName");
const last = ref<string>("lastName");

const isEven = computed(() => count.value % 2 === 0);

// watchEffect(() => isEven.value && submit()); // logs true

const inputValue = ref<string>("");
function submit() {
  console.log("test");
}
</script>

<template>
  <q-card class="q-pa-md">
    <!-- Parent.vue -->
    <div class="q-mb-md">
      <div>Parent count is: {{ count }}</div>
      <q-btn @click="count = 0">Reset count</q-btn>
    </div>

    <q-separator />

    <div class="q-mb-md">
      <Child
        v-model="count"
        v-model:total="total"
        v-model:firstname.lastNameModifiers="first"
        v-model:lastname.uppercase="last"
        :name2="inputValue"
      />
    </div>

    <!-- <div class="q-mb-md">
      <q-btn @click="refs.update">count ++</q-btn>
    </div> -->
  </q-card>

  <q-separator />

  <q-card class="q-pa-md">
    <!-- Parent.vue -->
    <div class="q-mb-md q-gutter-sm">
      <div><h4>Test Vue</h4></div>
      <div>
        <q-input outlined dense type="text" v-model="inputValue"></q-input>
      </div>
      <q-btn @click="submit">submit</q-btn>
    </div>

    <!-- <div class="q-mb-md">
      <Child :name="first"  />
    </div> -->
  </q-card>
</template>