Use v-model instead of defining items inside grid

example/src/App.vue

@@ -4,7 +4,7 @@ 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>
@@ -22,6 +22,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>
 

src/Grid.vue

@@ -8,7 +8,7 @@
       <div id="highlight" ref="highlight"></div>
     </slot>
     <DragContainer
-      v-for="item in items"
+      v-for="item in value"
       :key="item.key"
       :drag-i-d="item.key"
       :x="item.x"
@@ -30,6 +30,7 @@ export default {
   components: {
     DragContainer,
   },
+  emits: ["input"],
   props: {
     rows: {
       type: Number,
@@ -43,6 +44,10 @@ export default {
       type: Function,
       required: false,
     },
+    value: {
+      type: Array,
+      required: true,
+    },
   },
   methods: {
     positionAllowed(x, y, key) {
@@ -50,7 +55,7 @@ export default {
       if (x > this.cols) return false;
       if (y > this.rows) return false;
 
-      for (let item of this.items) {
+      for (let item of this.value) {
         if (key === item.key) continue;
         if (x >= item.x && x < item.x + item.w) {
           if (y >= item.y && y < item.y + item.h) {
@@ -107,8 +112,9 @@ export default {
 
       if (!newPositionValid) return;
 
-      this.items.splice(
-        this.items.findIndex((i) => {
+      let valueCopy = structuredClone(this.value);
+      valueCopy.splice(
+        valueCopy.findIndex((i) => {
           return i.key === element.key;
         }),
         1
@@ -116,7 +122,8 @@ export default {
 
       element.x = coords.x;
       element.y = coords.y;
-      this.items.push(element);
+      valueCopy.push(element);
+      this.$emit("input", valueCopy);
     },
     getCoords(x, y) {
       return {
@@ -125,21 +132,6 @@ export default {
       };
     },
   },
-  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: 2, y: 3, 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: {} },
-        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
-      ],
-    };
-  },
 };
 </script>