diff --git a/src/components/KeyValueEditor.vue b/src/components/KeyValueEditor.vue
index 098ced79d..d5dcdb934 100644
--- a/src/components/KeyValueEditor.vue
+++ b/src/components/KeyValueEditor.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Prop, Vue } from 'vue-property-decorator'
+import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator'
 import _ from 'lodash'
 
 interface KeyValueObj {
@@ -51,6 +51,11 @@ export default class KeyValueEditor extends Vue {
 
   private dataList: KeyValueObj[] = []
 
+  @Watch('value')
+  private handleValueChanged(val: Record<string, any>) {
+    this.processObjToArry()
+  }
+
   private handleInputChange() {
     const checkedList = this.dataList.filter((pair) => pair.checked)
     const objData: {
diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue
index 667e4c811..7724d6ad7 100644
--- a/src/views/connections/index.vue
+++ b/src/views/connections/index.vue
@@ -119,6 +119,9 @@ export default class Connections extends Vue {
       this.isEmpty = false
       await this.loadDetail(this.connectionId)
     } else {
+      if (this.oper === 'edit') {
+        this.$router.push({ path: '/recent_connections' })
+      }
       this.isEmpty = true
     }
     callback && callback()