add a computed value

2021-07-30_composition-01-starting-setup/src/App.vue

@@ -2,26 +2,44 @@
   <section class="container">
     <h2>{{ user.name }}</h2>
     <h2>{{ user.age }}</h2>
+    <button @click="setAge">Change Age</button>
+    <div>
+      <input type="text" placeholder="First Name" @input="setFirstName" />
+      <input type="text" placeholder="Last Name" @input="setLastlName" />
+    </div>
   </section>
 </template>
 
 <script>
-import { reactive } from 'vue';
+import { reactive, ref, computed } from 'vue';
 
 export default {
   setup() {
     const user = reactive({
-      name: 'Foo',
       age: 23
     });
+    const firstName = ref('');
+    const lastName = ref('');
 
-    setTimeout(function() {
-      user.name = 'baz';
+    user.name = computed(function() {
+      return firstName.value + ' ' + lastName.value;
+    });
+
+    function setAge() {
       user.age = '25';
-    }, 2000);
+    }
 
+    function setFirstName(event) {
+      firstName.value = event.target.value;
+    }
+    function setLastlName(event) {
+      lastName.value = event.target.value;
+    }
     return {
-      user
+      user,
+      setAge,
+      setFirstName,
+      setLastlName
     };
   }
 };