🛠️: refactor Webhook to composition API and ts

client/src/components/Common/Webhook.vue

@@ -1,27 +1,28 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import Webhooks from "@/utils/webhooks";
+
+interface Props {
+    type: string;
+    toolId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    toolId: undefined,
+});
+
+const webhook = ref(null);
+
+onMounted(() => {
+    new Webhooks.WebhookView({
+        webhook,
+        type: props.type,
+        toolId: props.toolId,
+    });
+});
+</script>
+
 <template>
     <div id="webhook-view" ref="webhook" />
 </template>
-<script>
-import Webhooks from "utils/webhooks";
-
-export default {
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        toolId: {
-            type: String,
-            default: null,
-        },
-    },
-    mounted() {
-        const el = this.$refs["webhook"];
-        new Webhooks.WebhookView({
-            el,
-            type: this.type,
-            toolId: this.toolId,
-        });
-    },
-};
-</script>