From 55d8a7d5d601c3d50b448140f80e2cd9b957205b Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 12:00:15 +0200
Subject: [PATCH] implement the task with reactive

---
 .../src/App.vue                                      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/2021-09-04_composition-assignment-1-problem/src/App.vue b/2021-09-04_composition-assignment-1-problem/src/App.vue
index 3ec6604..0a7a7fb 100644
--- a/2021-09-04_composition-assignment-1-problem/src/App.vue
+++ b/2021-09-04_composition-assignment-1-problem/src/App.vue
@@ -13,13 +13,14 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+//import { ref } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
     const courseGoal = 'Something is written here';
     //const showGoal = ref(false);
-    const Goal = ref({
+    const Goal = reactive({
       visibility: false
     });
 
@@ -30,8 +31,13 @@ export default {
     //}
 
     // ref object way
+    //function toggleGoal() {
+    //  Goal.value.visibility = !Goal.value.visibility;
+    //}
+
+    // reactive way
     function toggleGoal() {
-      Goal.value.visibility = !Goal.value.visibility;
+      Goal.visibility = !Goal.visibility;
     }
 
     return {