fix: watch layout in tab

src/store/modules/dashboard.ts

@@ -108,19 +108,25 @@ export const dashboardStore = defineStore({
       const idx = this.layout.findIndex(
         (d: LayoutConfig) => d.i === this.activedGridItem
       );
+      const { children } = this.layout[idx].children[tabIndex];
       const newWidget = {
         x: 0,
         y: 0,
         w: 24,
         h: 12,
-        i: String(this.layout[idx].children[tabIndex].children.length),
+        i: String(children.length),
         type: "Widget",
         widget: {},
         graph: {},
         standard: {},
       };
       if (this.layout[idx].children) {
-        this.layout[idx].children[tabIndex].children.push(newWidget);
+        const items = children.map((d: LayoutConfig) => {
+          d.y = d.y + newWidget.h;
+          return d;
+        });
+        items.push(newWidget);
+        this.layout[idx].children[tabIndex].children = items;
       }
     },
     activeGridItem(index: string) {

src/views/dashboard/controls/Tab.vue

@@ -74,7 +74,7 @@ limitations under the License. -->
   </grid-layout>
 </template>
 <script lang="ts" setup>
-import { defineProps, reactive, ref } from "vue";
+import { defineProps, reactive, ref, watch } from "vue";
 import type { PropType } from "vue";
 import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
@@ -124,6 +124,16 @@ function addTabWidget() {
   dashboardStore.addTabWidget(activeTabIndex.value);
 }
 document.body.addEventListener("click", handleClick, false);
+watch(
+  () =>
+    dashboardStore.layout[props.data.i].children[activeTabIndex.value].children,
+  () => {
+    state.layout =
+      dashboardStore.layout[props.data.i].children[
+        activeTabIndex.value
+      ].children;
+  }
+);
 </script>
 <style lang="scss" scoped>
 .tabs {