diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 0da24a385e..6521d3c225 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -216,11 +216,10 @@ watch(
 )
 
 watch(
-  () => areaData.value.components,
-  () => {
+  () => areaData.value.components.length,
+  (val, oldVal) => {
     groupAreaClickChange()
-  },
-  { deep: true }
+  }
 )
 
 const initWatermark = (waterDomId = 'editor-canvas-main') => {
@@ -1359,9 +1358,9 @@ const contextMenuShow = computed(() => {
 const markLineShow = computed(() => isMainCanvas(canvasId.value))
 
 // 点击事件导致选择区域变更
-const groupAreaClickChange = () => {
+const groupAreaClickChange = async () => {
   let groupAreaCom
-  const groupAreaHis = componentData.value.filter(ele => ele.id === 100000001)
+  const groupAreaHis = dvMainStore.componentData.filter(ele => ele.component === 'GroupArea')
   if (groupAreaHis && groupAreaHis.length > 0) {
     groupAreaCom = groupAreaHis[0]
   }
@@ -1369,7 +1368,8 @@ const groupAreaClickChange = () => {
   if (areaData.value.components.length > 1) {
     // 重新计算边界
     composeStore.calcComposeArea()
-    if (!groupAreaCom) {
+    const hist2 = dvMainStore.componentData.filter(ele => ele.component === 'GroupArea')
+    if (groupAreaHis.length === 0) {
       // 如果不存在 新建视括组件
       groupAreaCom = findNewComponent('GroupArea', 'GroupArea')
       dvMainStore.addComponent({ component: groupAreaCom, index: undefined })
@@ -1379,7 +1379,9 @@ const groupAreaClickChange = () => {
     groupAreaCom.style.width = areaData.value.style.width
     groupAreaCom.style.height = areaData.value.style.height
   } else if (groupAreaCom) {
-    dvMainStore.deleteComponentById(100000001)
+    groupAreaHis.forEach(ele => {
+      dvMainStore.deleteComponentById(ele.id)
+    })
   }
 }