implement the task with ref

2021-09-04_composition-assignment-1-problem/src/App.vue

@@ -2,9 +2,9 @@
   <h2>My Course Goal</h2>
   <!-- Task 1: Output your main course goal with help of the composition API -->
   <!-- Don't hardcode it into the template, instead hardcode it into the JS code -->
-  <h3>OUTPUT COURSE GOAL</h3>
+  <h3 v-if="showGoal">{{ courseGoal }}</h3>
   <!-- Task 2: Toggle (show/ hide) the goal with help of the button  -->
-  <button>Toggle Goal</button>
+  <button @click="toggleGoal">Toggle Goal</button>
   <!-- Task 3: Manage data in three ways -->
   <!-- => Separate refs -->
   <!-- => Ref Object -->
@@ -13,9 +13,25 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
-  
-}
+  setup() {
+    const courseGoal = 'Something is written here';
+    const showGoal = ref(false);
+
+    function toggleGoal() {
+      showGoal.value = !showGoal.value;
+      console.log(showGoal.value);
+    }
+
+    return {
+      courseGoal,
+      showGoal,
+      toggleGoal
+    };
+  }
+};
 </script>
 
 <style>
@@ -26,4 +42,4 @@ body {
   margin: 3rem;
   text-align: center;
 }
-</style>
+</style>