Performance issues with more than 100 items

[othmar52]

@melrose13-69 first of all: thanks for this library
unfortunately i experience performance issues with more than 100 items

show example `App.vue` that is close to unusable

<template>
<grid-layout
  v-model:layout="layout"
  :col-num="220"
  :row-height="85"
  :responsive="false"
  :margin="[0, 0]"
>
  <template #default="{ gridItemProps }">
    <grid-item
      v-for="item in layout"
      :key="item.i"
      v-bind="gridItemProps"
      :isResizable="false"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :style="`background-image: url(https://www.modulargrid.net/img/modcache/${item.imgSrc})`"
      @move="move"
      @moved="moved"
    >
      {{ item.i }}
    </grid-item>
  </template>
</grid-layout>
</template>
<script>
export default {
name: "App",
data() {
  return {
    layout: [
      { id:11076, y:0, i:0, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      { id:11076, y:1, i:1, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      { id:11076, y:3, i:2, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      { id:11076, y:2, i:3, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      // { id:11076, y:4, i:4, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      { id:11076, y:5, i:5, w:18, h:3, x:0, imgSrc:"11076.r.png" },
      { id:15550, y:0, i:6, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15550, y:1, i:7, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15550, y:2, i:8, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15550, y:3, i:9, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15550, y:4, i:10, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15550, y:5, i:11, w:8, h:3, x:18, imgSrc:"15550.r.png" },
      { id:15552, y:0, i:12, w:8, h:3, x:28, imgSrc:"15552.r.png" },
      { id:15552, y:1, i:13, w:8, h:3, x:28, imgSrc:"15552.r.png" },
      { id:15552, y:2, i:14, w:8, h:3, x:28, imgSrc:"15552.r.png" },
      { id:15552, y:3, i:15, w:8, h:3, x:26, imgSrc:"15552.r.png" },
      { id:15552, y:4, i:16, w:8, h:3, x:26, imgSrc:"15552.r.png" },
      { id:15552, y:5, i:17, w:8, h:3, x:26, imgSrc:"15552.r.png" },
      { id:15551, y:0, i:18, w:8, h:3, x:36, imgSrc:"15551.r.png" },
      { id:15551, y:1, i:19, w:8, h:3, x:36, imgSrc:"15551.r.png" },
      { id:15551, y:2, i:20, w:8, h:3, x:36, imgSrc:"15551.r.png" },
      { id:15551, y:3, i:21, w:8, h:3, x:34, imgSrc:"15551.r.png" },
      { id:15551, y:4, i:22, w:8, h:3, x:34, imgSrc:"15551.r.png" },
      { id:15551, y:5, i:23, w:8, h:3, x:34, imgSrc:"15551.r.png" },
      { id:60, y:0, i:24, w:8, h:3, x:44, imgSrc:"60.r.png" },
      { id:60, y:1, i:25, w:8, h:3, x:44, imgSrc:"60.r.png" },
      { id:60, y:2, i:26, w:8, h:3, x:44, imgSrc:"60.r.png" },
      { id:60, y:3, i:27, w:8, h:3, x:42, imgSrc:"60.r.png" },
      // { id:60, y:4, i:28, w:8, h:3, x:42, imgSrc:"60.r.png" },
      { id:60, y:5, i:29, w:8, h:3, x:42, imgSrc:"60.r.png" },
      { id:1377, y:0, i:30, w:4, h:3, x:52, imgSrc:"1377.r.png" },
      { id:110, y:1, i:31, w:4, h:3, x:52, imgSrc:"110.r.png" },
      { id:4381, y:4, i:32, w:4, h:3, x:50, imgSrc:"4381.r.png" },
      { id:5278, y:1, i:33, w:4, h:3, x:70, imgSrc:"5278.r.png" },
      { id:5278, y:0, i:34, w:4, h:3, x:70, imgSrc:"5278.r.png" },
      { id:110, y:2, i:35, w:4, h:3, x:104, imgSrc:"110.r.png" },
      { id:23191, y:6, i:36, w:60, h:3, x:0, imgSrc:"23191.r.png" },
      { id:481, y:0, i:37, w:14, h:3, x:56, imgSrc:"481.r.png" },
      // { id:7568, y:1, i:38, w:14, h:3, x:56, imgSrc:"7568.r.png" },
      { id:3786, y:0, i:39, w:2, h:3, x:26, imgSrc:"3786.r.png" },
      { id:3786, y:2, i:40, w:2, h:3, x:26, imgSrc:"3786.r.png" },
      { id:3786, y:1, i:41, w:2, h:3, x:26, imgSrc:"3786.r.png" },
      { id:3786, y:4, i:42, w:2, h:3, x:90, imgSrc:"3786.r.png" },
      { id:3786, y:4, i:43, w:2, h:3, x:106, imgSrc:"3786.r.png" },
      { id:244, y:0, i:44, w:34, h:3, x:74, imgSrc:"244.r.png" },
      { id:244, y:1, i:45, w:34, h:3, x:74, imgSrc:"244.r.png" },
      { id:348, y:0, i:46, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:1, i:47, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:2, i:48, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:3, i:49, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:4, i:50, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:5, i:51, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:348, y:6, i:52, w:4, h:3, x:108, imgSrc:"348.r.png" },
      { id:25021, y:2, i:53, w:18, h:3, x:52, imgSrc:"25021.r.png" },
      { id:14979, y:2, i:54, w:18, h:3, x:70, imgSrc:"14979.r.png" },
      { id:4002, y:2, i:55, w:16, h:3, x:88, imgSrc:"4002.r.png" },
      // { id:7577, y:3, i:56, w:20, h:3, x:50, imgSrc:"7577.r.png" },
      { id:10089, y:3, i:57, w:14, h:3, x:70, imgSrc:"10089.r.png" },
      { id:10146, y:3, i:58, w:18, h:3, x:84, imgSrc:"10146.r.png" },
      { id:19242, y:4, i:59, w:18, h:3, x:54, imgSrc:"19242.r.png" },
      { id:14979, y:4, i:60, w:18, h:3, x:72, imgSrc:"14979.r.png" },
      { id:2578, y:4, i:61, w:14, h:3, x:92, imgSrc:"2578.r.png" },
      { id:7848, y:5, i:62, w:40, h:3, x:62, imgSrc:"7848.r.png" },
      { id:1211, y:5, i:63, w:12, h:3, x:50, imgSrc:"1211.r.png" },
      { id:9581, y:5, i:64, w:6, h:3, x:102, imgSrc:"9581.r.png" },
      { id:18611, y:6, i:65, w:42, h:3, x:66, imgSrc:"18611.r.png" },
      { id:1301, y:0, i:66, w:42, h:3, x:112, imgSrc:"1301.r.png" },
      { id:1300, y:0, i:67, w:42, h:3, x:158, imgSrc:"1300.r.png" },
      { id:2697, y:0, i:68, w:20, h:3, x:200, imgSrc:"2697.r.png" },
      { id:47, y:0, i:69, w:4, h:3, x:154, imgSrc:"47.r.png" },
      { id:385, y:1, i:70, w:10, h:3, x:112, imgSrc:"385.r.png" },
      { id:6043, y:1, i:71, w:6, h:3, x:122, imgSrc:"6043.r.png" },
      { id:6039, y:1, i:72, w:14, h:3, x:128, imgSrc:"6039.r.png" },
      { id:6039, y:1, i:73, w:14, h:3, x:142, imgSrc:"6039.r.png" },
      { id:6039, y:1, i:74, w:14, h:3, x:156, imgSrc:"6039.r.png" },
      { id:9410, y:1, i:75, w:14, h:3, x:170, imgSrc:"9410.r.png" },
      { id:9303, y:1, i:76, w:14, h:3, x:184, imgSrc:"9303.r.png" },
      { id:6042, y:1, i:77, w:12, h:3, x:198, imgSrc:"6042.r.png" },
      { id:6041, y:1, i:78, w:10, h:3, x:210, imgSrc:"6041.r.png" },
      { id:49, y:2, i:79, w:8, h:3, x:124, imgSrc:"49.r.png" },
      { id:3786, y:2, i:80, w:2, h:3, x:122, imgSrc:"3786.r.png" },
      { id:15574, y:2, i:81, w:28, h:3, x:132, imgSrc:"15574.r.png" },
      { id:114, y:2, i:82, w:4, h:3, x:160, imgSrc:"114.r.png" },
      { id:114, y:2, i:83, w:4, h:3, x:178, imgSrc:"114.r.png" },
      { id:449, y:2, i:84, w:14, h:3, x:164, imgSrc:"449.r.png" },
      { id:7844, y:2, i:85, w:18, h:3, x:182, imgSrc:"7844.r.png" },
      { id:1434, y:2, i:86, w:20, h:3, x:200, imgSrc:"1434.r.png" },
      { id:3786, y:6, i:87, w:2, h:3, x:112, imgSrc:"3786.r.png" },
      { id:3786, y:5, i:88, w:2, h:3, x:112, imgSrc:"3786.r.png" },
      { id:3786, y:4, i:89, w:2, h:3, x:112, imgSrc:"3786.r.png" },
      { id:3786, y:3, i:90, w:2, h:3, x:112, imgSrc:"3786.r.png" },
      { id:1590, y:3, i:91, w:12, h:3, x:114, imgSrc:"1590.r.png" },
      { id:1590, y:4, i:92, w:12, h:3, x:114, imgSrc:"1590.r.png" },
      { id:13675, y:3, i:93, w:3, h:3, x:126, imgSrc:"13675.r.png" },
      { id:13675, y:3, i:94, w:3, h:3, x:129, imgSrc:"13675.r.png" },
      { id:13675, y:6, i:95, w:3, h:3, x:217, imgSrc:"13675.r.png" },
      { id:13675, y:5, i:96, w:3, h:3, x:217, imgSrc:"13675.r.png" },
      { id:13675, y:3, i:97, w:3, h:3, x:217, imgSrc:"13675.r.png" },
      { id:13675, y:5, i:98, w:3, h:3, x:214, imgSrc:"13675.r.png" },
      { id:10493, y:3, i:99, w:12, h:3, x:132, imgSrc:"10493.r.png" },
      { id:5472, y:3, i:100, w:8, h:3, x:144, imgSrc:"5472.r.png" },
      { id:570, y:3, i:101, w:8, h:3, x:165, imgSrc:"570.r.png" },
      { id:29131, y:3, i:102, w:13, h:3, x:152, imgSrc:"29131.r.png" },
      { id:4062, y:3, i:103, w:13, h:3, x:187, imgSrc:"4062.r.png" },
      { id:26554, y:3, i:104, w:13, h:3, x:200, imgSrc:"26554.r.png" },
      { id:16118, y:3, i:105, w:10, h:3, x:177, imgSrc:"16118.r.png" },
      { id:4381, y:3, i:106, w:4, h:3, x:173, imgSrc:"4381.r.png" },
      { id:5278, y:3, i:107, w:4, h:3, x:213, imgSrc:"5278.r.png" },
      { id:7158, y:4, i:108, w:8, h:3, x:126, imgSrc:"7158.r.png" },
      { id:2873, y:4, i:109, w:46, h:3, x:134, imgSrc:"2873.r.png" },
      { id:3623, y:4, i:110, w:26, h:3, x:180, imgSrc:"3623.r.png" },
      { id:5420, y:4, i:111, w:14, h:3, x:206, imgSrc:"5420.r.png" },
      { id:1526, y:5, i:112, w:14, h:3, x:114, imgSrc:"1526.r.png" },
      { id:335, y:5, i:113, w:26, h:3, x:128, imgSrc:"335.r.png" },
      { id:23191, y:5, i:114, w:60, h:3, x:154, imgSrc:"23191.r.png" },
      { id:6092, y:6, i:115, w:14, h:3, x:114, imgSrc:"6092.r.png" },
      { id:20469, y:6, i:116, w:8, h:3, x:128, imgSrc:"20469.r.png" },
      { id:10491, y:6, i:117, w:20, h:3, x:136, imgSrc:"10491.r.png" },
      { id:2567, y:6, i:118, w:16, h:3, x:161, imgSrc:"2567.r.png" },
      { id:2136, y:6, i:119, w:4, h:3, x:177, imgSrc:"2136.r.png" },
      { id:2136, y:6, i:120, w:4, h:3, x:157, imgSrc:"2136.r.png" },
      { id:4331, y:6, i:121, w:36, h:3, x:181, imgSrc:"4331.r.png" },
      { id:32385, y:2, i:122, w:10, h:3, x:112, imgSrc:"32385.r.png" },
      { id:13675, y:3, i:123, w:3, h:3, x:102, imgSrc:"13675.r.png" },
      { id:13675, y:3, i:124, w:3, h:3, x:105, imgSrc:"13675.r.png" },
      { id:13675, y:6, i:125, w:3, h:3, x:60, imgSrc:"13675.r.png" },
      { id:13675, y:6, i:126, w:3, h:3, x:63, imgSrc:"13675.r.png" }
    ],
  };
},
methods: {
  move(itemIdx){
    console.log('move', itemIdx);
  },
  moved(itemIdx){
    console.log('moved', itemIdx);
  }
}
};
</script>

<style>

#app {
background: #2e3234;
margin-bottom: 50px;
}
.vue-grid-layout {
outline: thick solid #000000;
width: calc(220 * 10px);
margin: 0 auto;
position: relative;
}

.vue-grid-item {
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
</style>

is there anything i am doing wrong?
or is this library not capable of handling that amount of items?

[holycat1379]

https://www.npmjs.com/package/vue3-grid-layout-next?activeTab=readme