Vue3+gridstack js responsive

Question

I am trying to create a responsive dashboard in vue3 using gridstack js, the problem is that when I instantiate a component inside a widget and resize the widget, the component is not resized, I mainly have echarts charts and bootstrap tables that are responsive when used on pages but are not resizing when I resize the widgets, any help is appreciated

I enclosed each custom component inside a widget where each component is responsive by itself. I also tried many codepens but they don't have a specific application i.e. using a component inside a gridstack widget like I am trying to do.

I have

    chart.setOption(options); 
    window.addEventListener('resize', function () { 
        const newWidth = window.innerWidth; 
        const newHeight = window.innerHeight; 
        console.log("W:", newWidth," H: ", newHeight);
        chart.resize(newWidth, newHeight); 
    });

but it is not getting triggered when used inside a gridstack widget, when using it on a page it works