diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index ecf1b8774d..08ea2e4bdb 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -175,18 +175,7 @@ const formInput = ref({
   ],
 })
 
-const eventList = [
-  { text: ['After', 'Insert'], value: ['after', 'insert'] },
-  { text: ['After', 'Update'], value: ['after', 'update'] },
-  { text: ['After', 'Delete'], value: ['after', 'delete'] },
-  ...(hook.version === 'v2'
-    ? [
-        { text: ['After', 'Bulk Insert'], value: ['after', 'bulkInsert'] },
-        { text: ['After', 'Bulk Update'], value: ['after', 'bulkUpdate'] },
-        { text: ['After', 'Bulk Delete'], value: ['after', 'bulkDelete'] },
-      ]
-    : []),
-]
+const eventList = ref<Record<string, any>[]>([])
 
 const notificationList = computed(() => {
   return appInfo.isCloud
@@ -283,6 +272,19 @@ function setHook(newHook: HookType) {
   if (hook.version === 'v1') {
     urlTabKey.value = 'body'
   }
+
+  eventList.value = [
+    { text: ['After', 'Insert'], value: ['after', 'insert'] },
+    { text: ['After', 'Update'], value: ['after', 'update'] },
+    { text: ['After', 'Delete'], value: ['after', 'delete'] },
+    ...(hook.version === 'v2'
+      ? [
+          { text: ['After', 'Bulk Insert'], value: ['after', 'bulkInsert'] },
+          { text: ['After', 'Bulk Update'], value: ['after', 'bulkUpdate'] },
+          { text: ['After', 'Bulk Delete'], value: ['after', 'bulkDelete'] },
+        ]
+      : []),
+  ]
 }
 
 async function onEventChange() {
@@ -763,4 +765,4 @@ onMounted(async () => {
       <LazyWebhookCallLog :hook="hook" />
     </a-tab-pane>
   </a-tabs>
-</template>
+</template>
\ No newline at end of file