Newly added items are added randomly

[akbasferhat]

• Browser [Chrome]
• Vue Version [3]

Describe the bug Hello, when I add new items to existing items, they are not added sequentially and are added randomly. Please look carefully at the id numbers written under the items.

Screenshots Here is image : https://ibb.co/6grS635 Script codes `const layout = reactive([ {"x":0,"y":0,w: 4, h: 10,"i":0, "uid":'123'}, {"x":4,"y":0,w: 4, h: 10,"i":1, "uid":'1234'},

]); const itemTitle = (item) => { let result = item.i; if (item.static) { result += " - Static"; } return result; } let draggable = true let resizable = true let index = 0 let colNum = 12 let autoSize = true

onBeforeMount(async () => { index = layout.length

})

const addItem = function () { // Add a new item. It must haconstve a unique key! console.log(layout.length) layout.push({ x: (layout.length * 2) % (colNum || 12), y: layout.length + (colNum || 12), // puts it at the bottom w: 4, h: 10, i: index, uid: uniqueId, }); // Increment the counter to ensure key is always unique. index++; } const removeItem = function (val) { const index = layout.map(item => item.i).indexOf(val); layout.splice(index, 1); }`

Template codes

<grid-layout :layout.sync="layout" :row-height="25" :is-draggable="draggable" :is-resizable="resizable" :vertical-compact="true" :use-css-transforms="true"> <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" </grid-item> </grid-layout>