properly rewrite the provides propperty

2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/App.vue

@@ -12,27 +12,30 @@
 export default {
   data() {
     return {
+      topics: [
+        {
+          id: 'basics',
+          title: 'The Basics',
+          description: 'Core Vue basics you have to know',
+          fullText:
+            'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!'
+        },
+        {
+          id: 'components',
+          title: 'Components',
+          description:
+            'Components are a core concept for building Vue UIs and apps',
+          fullText:
+            'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.'
+        }
+      ],
       activeTopic: null
     };
   },
-  provide: {
-    topics: [
-      {
-        id: 'basics',
-        title: 'The Basics',
-        description: 'Core Vue basics you have to know',
-        fullText:
-          'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!'
-      },
-      {
-        id: 'components',
-        title: 'Components',
-        description:
-          'Components are a core concept for building Vue UIs and apps',
-        fullText:
-          'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.'
-      }
-    ]
+  provide() {
+    return {
+      topics: this.topics
+    };
   },
   methods: {
     activateTopic(topicId) {