add a watcher example

basics-05-using-the-native-event-object/app.js

@@ -3,15 +3,33 @@ const app = Vue.createApp({
         return {
             counter: 0,
             name: "",
+            lastName: "",
+            fullName: "",
         };
     },
-    computed: {
+    watch: {
-        fullName() {
+        name(value) {
-            if (this.name === "") {
+            if (value === "") {
-                return "";
+                this.fullName = "";
+            } else {
+                this.fullName = value + " " + this.lastName;
             }
-            return this.name + " " + "Muster";
         },
+        lastName(value) {
+            if (value === "") {
+                this.fullName = "";
+            } else {
+                this.fullName = this.name + " " + value;
+            }
+        },
+    },
+    computed: {
+        // fullName() {
+        //     if (this.name === "") {
+        //         return "";
+        //     }
+        //     return this.name + " " + "Muster";
+        // },
     },
     methods: {
         setName(event) {

basics-05-using-the-native-event-object/index.html

@@ -21,6 +21,7 @@
         <button v-on:click="reduce(5)">Subtract 5</button>
         <p>Result: {{ counter }}</p>
         <input type="text" v-model="name">
+        <input type="text" v-model="lastName">
         <button v-on:click="resetInput">Reset Input</button>
         <p>Your Name: {{ fullName }}</p>
     </section>