diff --git a/package-lock.json b/package-lock.json
index b3fde735..5337d83e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18789,24 +18789,16 @@
       }
     },
     "vue-grid-layout": {
-      "version": "3.0.0-beta1",
-      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
-      "integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+      "version": "2.3.12",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.3.12.tgz",
+      "integrity": "sha512-x9l4KxfH0MeB4xImanrnnTihksq8LYk3f40hm1sdiTHF2bYM+Xhae6eQsvFWEFwbYq7RVNvB80qwis1vInB+WQ==",
       "requires": {
         "@interactjs/actions": "^1.10.2",
         "@interactjs/auto-start": "^1.10.2",
         "@interactjs/dev-tools": "^1.10.2",
         "@interactjs/interactjs": "^1.10.2",
         "@interactjs/modifiers": "^1.10.2",
-        "element-resize-detector": "^1.2.1",
-        "mitt": "^2.1.0"
-      },
-      "dependencies": {
-        "mitt": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-        }
+        "element-resize-detector": "^1.2.1"
       }
     },
     "vue-hot-reload-api": {
diff --git a/package.json b/package.json
index abf0459f..917fdc70 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "three": "^0.131.3",
     "three-orbit-controls": "^82.1.0",
     "vue": "^3.0.0",
-    "vue-grid-layout": "^3.0.0-beta1",
+    "vue-grid-layout": "^2.3.12",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0-0",
     "vue-types": "^4.1.1",
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 64d7554c..8b046835 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -27,7 +27,7 @@ interface AppState {
   utcHour: number;
   utcMin: number;
   eventStack: (() => unknown)[];
-  timer: ReturnType<typeof setInterval> | null;
+  timer: Nullable<any>;
 }
 
 export const appStore = defineStore({
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 7c132c04..6596e01a 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
   </div>
   <div class="flex-h ds-main">
     <div class="ds-layout">
-      <grid-layout
+      <GridLayout
         v-model="layout"
         :col-num="12"
         :row-height="30"
@@ -29,7 +29,7 @@ limitations under the License. -->
         :vertical-compact="true"
         :use-css-transforms="true"
       >
-        <grid-item
+        <GridItem
           v-for="item in layout"
           :static="item.static"
           :x="item.x"
@@ -40,53 +40,66 @@ limitations under the License. -->
           :key="item.i"
         >
           <span class="text">{{ itemTitle(item) }}</span>
-        </grid-item>
-      </grid-layout>
+        </GridItem>
+      </GridLayout>
     </div>
     <div class="ds-config">Configurations</div>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref, reactive } from "vue";
+<script lang="ts">
+import { ref, reactive, defineComponent } from "vue";
 import { ElButton } from "element-plus";
-import { GridLayout, GridItem, GridItemData } from "vue-grid-layout";
+import VueGridLayout, { GridItemData } from "vue-grid-layout";
 interface CustomData extends GridItemData {
-  label?: string;
   static: boolean;
 }
-const layout = reactive<CustomData[]>([
-  { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
-  { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
-  { x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
-  { x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
-  { x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
-  { x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
-  { x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
-  { x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
-  { x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
-  { x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
-  { x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
-  { x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
-  { x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
-  { x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
-  { x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
-  { x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
-  { x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
-  { x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
-  { x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
-  { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
-]);
-console.log(layout);
-const draggable = ref(true);
-const resizable = ref(true);
-const index = ref(0);
-function itemTitle(item: any) {
-  let result = item.i;
-  if (item.static) {
-    result += " - Static";
-  }
-  return result;
-}
+
+console.log(VueGridLayout.GridLayout);
+export default defineComponent({
+  name: "dashboardEdit",
+  components: {
+    ElButton,
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+  },
+  setup() {
+    const layout = reactive<CustomData[]>([
+      { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
+      { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
+      { x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
+      { x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
+      { x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
+      { x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
+      { x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
+      { x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
+      { x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
+      { x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
+      { x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
+      { x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
+      { x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
+      { x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
+      { x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
+      { x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
+      { x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
+      { x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
+      { x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
+      { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
+    ]);
+    console.log(layout);
+
+    const draggable = ref(true);
+    const resizable = ref(true);
+    const index = ref(0);
+    function itemTitle(item: any) {
+      let result = item.i;
+      if (item.static) {
+        result += " - Static";
+      }
+      return result;
+    }
+    return { draggable, resizable, index, layout, itemTitle };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {