Loading content inside GridLayout or GridItem

[biroplane]

Hello.
I didn't find anything on how dynamically load the content of each item.
My plan was to use this create a customizable dashboard.
I've tryed setting a <component> tag inside the grid, but it was not able to load the component even if i lazyloaded or used resolveComponent function from vue.
I started setting the component name under the i property, but this might not fit my needs since the same component could be used multiple times.
I've also tryed to extend the Layout and implement the component property, but seems a little bit forced.

any tips oh what's the better approach on this?

the only "working" solution is to create a componentMap variables with all the components in it (loaded on top of the file) and "matched" in <component> tag like this:

const layout = ref<LayoutItem>([
  { x: 0, y: 0, w: 6, h: 2, i: "0", component:"Products" },
  { x: 0, y: 2, w: 4, h: 3, i: "1" },
  { x: 4, y: 0, w: 2, h: 3, i: "2" },
]);

const componentMap = {
  Products
}
...

<template #item="{ item }">
        <div class="w-full h-full bg-red-500">
          <Component v-if="item.component" :is="componentMap[item.component]" />
        </div>
      </template>