diff --git a/frontend/src/components/canvas/customComponent/DeRichText.vue b/frontend/src/components/canvas/customComponent/DeRichText.vue
index 96ed01cca2..4e5a76ab38 100644
--- a/frontend/src/components/canvas/customComponent/DeRichText.vue
+++ b/frontend/src/components/canvas/customComponent/DeRichText.vue
@@ -36,6 +36,7 @@ import 'tinymce/plugins/directionality'
 import 'tinymce/plugins/nonbreaking'
 import 'tinymce/plugins/pagebreak'
 import { mapState } from 'vuex'
+import Vue from 'vue'
 
 export default {
   name: 'DeRichText',
@@ -155,7 +156,7 @@ export default {
     setEdit() {
       if (this.editStatus) {
         this.canEdit = true
-        this.element.editing = true
+        Vue.set(this.element, 'editing', true)
         this.reShow()
       }
     },
diff --git a/frontend/src/components/deDrag/index.vue b/frontend/src/components/deDrag/index.vue
index 2591f61ad6..7ac61779e8 100644
--- a/frontend/src/components/deDrag/index.vue
+++ b/frontend/src/components/deDrag/index.vue
@@ -74,18 +74,22 @@
         class="main-background"
       >
         <div
+          v-show="!this.element.editing"
           class="de-drag-area de-drag-top"
           @mousedown="elementMouseDown"
         />
         <div
+          v-show="!this.element.editing"
           class="de-drag-area de-drag-right"
           @mousedown="elementMouseDown"
         />
         <div
+          v-show="!this.element.editing"
           class="de-drag-area de-drag-bottom"
           @mousedown="elementMouseDown"
         />
         <div
+          v-show="!this.element.editing"
           class="de-drag-area de-drag-left"
           @mousedown="elementMouseDown"
         />
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index d2f832d71d..72622c1890 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -198,6 +198,9 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      if (!component && state.curComponent) {
+        Vue.set(state.curComponent, 'editing', false)
+      }
       // 当前视图操作状态置空
       if (component) {
         component['optStatus'] = {
@@ -206,9 +209,9 @@ const data = {
         }
         // Is the current component in editing status
         if (!state.curComponent) {
-          component['editing'] = false
+          Vue.set(component, 'editing', false)
         } else if (component.id !== state.curComponent.id) {
-          component['editing'] = false
+          Vue.set(component, 'editing', false)
         }
       }
       state.styleChangeTimes = 0