Using grid-item wrapped in a component does not work

[leoatfentech]

Hey, I tried to extract the grid item to a component to make it fully customized. But when I try to use it, the grid item is not working

GridLayout component

<template>
    <grid-layout
        v-model:layout="props.layout"
        :col-num="options.colNum"
        :row-height="options.rowNum"
        :is-draggable="options.isDraggable"
        :is-resizable="options.isResizable"
        :responsive="options.responsive"
        :vertical-compact="options.verticalCompact"
        :prevent-collision="options.preventCollision"
        :use-css-transforms="options.useCssTransform"
    >
        <CustomGridItem v-for="item in layout" :item="item"></CustomGridItem>
    </grid-layout>
</template>

<script setup lang="ts">
import CustomGridItem from '@/components/molecules/custom-grid-item/CustomGridItem.vue'
import { GridLayout } from 'vue3-grid-layout-next'
import type { Layout } from 'vue3-grid-layout-next/dist/helpers/utils'

interface FolderGridLayoutProps {
    layout: Layout
}

const props = defineProps<FolderGridLayoutProps>()

const options = {
    colNum: 30,
    rowNum: 30,
    isDraggable: true,
    isResizable: true,
    responsive: true,
    verticalCompact: false,
    preventCollision: true,
    useCssTransform: true,
}
</script>

Custom Grid Item component

<template>
    <grid-item
        :static="item.static"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
    >
        <span class="text">{{ item.i }}</span>
    </grid-item>
</template>

<script setup lang="ts">
import { GridItem } from 'vue3-grid-layout-next'
import { LayoutItem } from 'vue3-grid-layout-next/dist/helpers/utils'

interface CustomGridItemProps {
    item: LayoutItem
}

defineProps<CustomGridItemProps>()
</script>

As a result, item are displayed in a way that we can't use them, size are not the right ones... Here is a screenshot of the result, any idea on how to solve this ?

While using the grid-item component directly in the grid layout, the result looks like this (working like expected) :

[xiaomeia]

I have discovered the same issue, looking forward to resolving it