layout re-sizing in loop

[shailee-m-argus]

I am using 2 grid layouts, one nested inside the other. (Both responsive not resizeable). THe girdd layout upadte gets called in loop and the grid become smallers

<grid-layout
        v-bind="$attrs"
        ref="gridLayout"
        v-model:layout="widgetsToDisplay"
        :col-num="layoutDefaults.colNum"
        :cols="layoutDefaults.cols"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="layoutDefaults.margin"
        :use-css-transforms="false"
        :row-height="layoutDefaults.rowHeight"
        :auto-size="shouldAutosize"
        data-test="vue-grid-layout"
      >
        <grid-item
          v-for="item in widgetsToDisplay"
          :key="item.i.UUID"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :min-w="widgetsSize[item.i.type].min[0]"
          :min-h="widgetsSize[item.i.type].min[1]"
          drag-allow-from=".widget-toolbar"
          :max-w="widgetsSize[item.i.type].max[0]"
          :max-h="widgetsSize[item.i.type].max[1]"
          @resize="widgetResize"
          @resized="widgetResize"
          @moved="widgetMove"
          :class="{
            'html-widget': checkItemType(item, 'HTML'),
            'is-cockpit-widget': checkItemType(item, 'Cockpit') || checkItemType(item, 'Access Control Cockpits')
          }"
          data-test="vue-grid-item"
        >
....
// renders the same component again
....
</grid-item>
</grid-layout>

All components width shrinks

Vue:3 node: v20 Browser: chrome