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

@@ -4,10 +4,13 @@ import Grid from "../../src/Grid.vue";
 
 <template>
   <div id="app">
-    <Grid :rows="10" :cols="5" :pos-validation="blockField">
+    <Grid :rows="10" :cols="5" :pos-validation="blockField" v-model="items">
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
+      <template #item="item">
+        <div class="container">{{ item }}</div>
+      </template>
     </Grid>
   </div>
 </template>
@@ -22,6 +25,28 @@ export default {
       return key !== "obj8";
     },
   },
+  data() {
+    return {
+      items: [
+        { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} },
+        { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} },
+        { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} },
+        { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} },
+        { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} },
+        { x: 5, y: 1, w: 1, h: 1, key: "obj6", data: {} },
+        { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} },
+        {
+          x: 1,
+          y: 4,
+          w: 1,
+          h: 1,
+          key: "obj8",
+          data: { title: "I'm blocked from moving!" },
+        },
+        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
+      ],
+    };
+  },
 };
 </script>
 
@@ -45,4 +70,10 @@ export default {
   font-weight: bold;
   text-shadow: 4px 4px 4px #2c3e50;
 }
+
+.container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
 </style>