diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index dabea73a..ebd93637 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -131,9 +131,5 @@ export const useStage = (stageOptions: StageOptions) => {
     }
   });
 
-  onBeforeUnmount(() => {
-    stage.destroy();
-  });
-
   return stage;
 };
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 98b578e5..82e971d0 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -123,6 +123,10 @@ watchEffect(() => {
   });
 });
 
+onBeforeUnmount(() => {
+  stage?.destroy();
+});
+
 watch(zoom, (zoom) => {
   if (!stage || !zoom) return;
   stage.setZoom(zoom);
diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
index 1eded88a..b1fd74aa 100644
--- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
@@ -62,6 +62,11 @@ watch(stageOverlay, (stageOverlay) => {
   }
 });
 
+onBeforeUnmount(() => {
+  services?.stageOverlayService.get('stage')?.destroy();
+  services?.stageOverlayService.set('stage', null);
+});
+
 const closeOverlayHandler = () => {
   services?.stageOverlayService.closeOverlay();
 };