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

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>"
},