How to get gridstack position from JSON and add to querySelector Vue3

Question

I am trying to get gridstack position using JSON data as shown on gridstack serialization.

    <button class="x-btn" @click="saveFullGrid()">Save Full</button>
    <button class="x-btn" @click="loadFullGrid()">Load Full</button>
    <hr />
    <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>

    <section class="grid-stack">
        <div v-for="(component, key, index) in components" :key="'component' + index" :gs-id="key"
            class="grid-stack-item" :gs-x="component.gridPos.x" :gs-y="component.gridPos.y" :gs-h="component.gridPos.h"
            :gs-w="component.gridPos.w" gs-auto-position="true">
            <div class="grid-stack-item-content">
                <component :is="component.name" v-bind="component.props" />
                <button class="edit" @click="remove(index, key, component)">Remove</button>
            </div>
        </div>
        <hr />
    </section>

//functions on script
<script>
        //works and displays data on text area
        function saveFullGrid() {
            serializedFull = grid.save(true, true);
            serializedData = serializedFull.children;
            document.querySelector('#saved-data').value = JSON.stringify(serializedFull, null, '  ');
            //use ajax to send json to db for storage - not yet implemented
        }

        //grid is destroyed but is not built again. What's the problem?
        function loadFullGrid() {
            if (!serializedFull) return;
            grid.destroy(true); // nuke everything
            grid = GridStack.addGrid(document.querySelector('#gs-id'), serializedFull)
            // console.log(grid)
        }
</script>

The data is saved but when I try to clear and load data from JSON using function loadFullGrid, the components do not render again on grid. What could be the problem with my code?

//myjson data
{
  "float": true,
  "cellHeight": 70,
  "minRow": 1,
  "children": [
    {
      "x": 0,
      "y": 0,
      "w": 6,
      "h": 7,
      "id": "yourRandomComponent1",
      "content": "<div data-v-bd6d1993=\"\" class=\"chartBox\"><canvas data-v-bd6d1993=\"\" id=\"myChart\" width=\"588\" height=\"400\" style=\"display: block; box-sizing: border-box; height: 400px; width: 588px;\"></canvas><!-- <div v-if=\"!loaded\" class=\"lds-dual-ring\"></div> --></div><!-- The Modal --><div id=\"myModal\" class=\"modal\" data-v-bd6d1993=\"\"><!-- Modal content --><div class=\"modal-content\" data-v-bd6d1993=\"\"><span class=\"close\" data-v-bd6d1993=\"\">×</span><div class=\"modal-header\" data-v-bd6d1993=\"\"><h1 class=\"label\" data-v-bd6d1993=\"\">Heading</h1></div><div class=\"modal-body\" data-v-bd6d1993=\"\"><h1 id=\"myList\" data-v-bd6d1993=\"\"></h1></div></div></div><button data-v-99a023f4=\"\" class=\"edit\" data-ol-has-click-handler=\"\">Remove</button>"
    },