no message

src/components/TestUpgrade.vue

@@ -1,15 +1,36 @@
 <!-- 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>

src/modules/01_dashboard/views/test.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
 import Child from "@/components/TestUpgrade.vue";
-import { ref } from "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>
@@ -17,7 +28,34 @@ const total = ref<number>(0);
     <q-separator />
 
     <div class="q-mb-md">
-      <Child v-model="count" v-model:total="total" />
+      <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>