Request for Best Practice: Nested GridStack Implementation with Vue 3 #2640

Subject of the issue

there is a need for a best practice guideline for implementing a nested GridStack layout with Vue 3.

Your environment

• version of gridstack.js -8.x
• which browser/OS: chrome

Steps to reproduce

i have a data like this:

const demoData = [
  {
    id: "22",
    x: "3",
    y: "3",
    w: 2,
    h: 2,
    widgetData: {
      type: "BusinessComponentA",
    },
  },
  {
    id: "11",
    x: "0",
    y: "0",
    w: 2,
    h: 2,
    children: [
      {
        x: "3",
        y: "3",
        w: 2,
        h: 2,
        widgetData: {
          type: "BusinessComponentB",
        },
      },
    ],
  },
];

based on the data，Expected Rendering Result:

• One grid item rendering .
• Another grid item rendering a nested GridStack, with its content being .

Expected behavior

how show i organize the code,tks