Make data of example 4 a function

example/src/App.vue

@@ -74,18 +74,34 @@ import NumberCounter from "./components/NumberCounter.vue";
       </drag-grid>
     </div>
     <div class="ttt-container">
-      <label>
-        Lesson 1 has length: {{ lesson1Length }}
-        <input type="range" v-model="lesson1Length" min="1" max="5" step="1" />
-      </label>
-      <label>
-        Lesson grid has width: {{ lesson1Cols }}
-        <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
-      </label>
-      <label>
-        Lesson grid has height: {{ lesson1Rows }}
-        <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
-      </label>
+      <div>
+        <label>
+          Lesson 1 has length: {{ lesson1Length }}
+          <input
+            type="range"
+            v-model="lesson1Length"
+            min="1"
+            max="5"
+            step="1"
+          />
+        </label>
+        <input type="text" v-model="lessonData.lesson1" />
+      </div>
+      <div>
+        <label>
+          Lesson grid has width: {{ lesson1Cols }}
+          <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
+        </label>
+        <input type="text" v-model="lessonData.lesson2" />
+      </div>
+      <div>
+        <label>
+          Lesson grid has height: {{ lesson1Rows }}
+          <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
+          <input type="text" v-model="lessonData.lesson3.inside" />
+          <input type="text" v-model="lessonData.lesson3.outside" />
+        </label>
+      </div>
 
       <drag-grid
         :value="lessons1"
@@ -207,6 +223,14 @@ export default {
       lesson3X: -1,
       lesson3Y: -1,
       lesson3inPlan: false,
+      lessonData: {
+        lesson1: "Nothing",
+        lesson2: "Hallo",
+        lesson3: {
+          inside: "This is lesson 3 inside the plan",
+          outside: "This is lesson3 outside of the plan",
+        },
+      },
     };
   },
   computed: {
@@ -222,7 +246,9 @@ export default {
           w: 1,
           h: this.lesson1Length,
           key: "lesson1",
-          data: {},
+          data: {
+            text: this.lessonData.lesson1,
+          },
         },
         {
           x: (grid) => {
@@ -234,7 +260,9 @@ export default {
           w: 1,
           h: parseInt(this.lesson1Length) + 1,
           key: "lesson2",
-          data: {},
+          data: {
+            text: this.lessonData.lesson2,
+          },
         },
         {
           x: (grid) => {
@@ -252,7 +280,14 @@ export default {
           w: 1,
           h: parseInt(this.lesson1Length) + 1,
           key: "lesson3",
-          data: {},
+          data: (grid) => {
+            return {
+              text:
+                grid.gridId === "lesson-storage"
+                  ? this.lessonData.lesson3.outside
+                  : this.lessonData.lesson3.inside,
+            };
+          },
         },
       ];
     },