Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

example/src/App.vue

@@ -42,7 +42,7 @@ import CircularCard from "./components/CircularCard.vue";
       >
         <template #item="item">
           <CircularCard>
-            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+            {{ item.data.text }}</CircularCard
           >
         </template>
       </DragGrid>
@@ -64,7 +64,7 @@ export default {
       return false;
     },
     randomKey(element) {
-      if (element.key !== "a" && element !== "b") return;
+      if (element.key.length !== 1) return;
       element.key += Math.random().toString(36).replace('0.', '');
     },
   },
@@ -89,12 +89,12 @@ export default {
         { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
       ],
       ticTacToe1: [
-        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: {} },
-        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {} },
+        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: {text: "X"} },
+        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {text: "O"} },
       ],
       ticTacToe2: [
-          { x: 1, y: 1, w: 1, h: 1, key: "a", data: {} },
-          { x: 2, y: 1, w: 1, h: 1, key: "b", data: {} },
+          { x: 1, y: 1, w: 1, h: 1, key: "a", data: {text: "X"} },
+          { x: 2, y: 1, w: 1, h: 1, key: "b", data: {text: "O"} },
       ],
     };
   },