diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index a0185498b..ad2daa5f3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -2,7 +2,7 @@
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import { useHook } from './useHook';
+import hookMixin from './hookMixin';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
 import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';
@@ -13,17 +13,13 @@ export default {
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
   },
+  mixins: [hookMixin],
   props: {
     integrationId: {
       type: [String, Number],
       required: true,
     },
   },
-  setup(props) {
-    const { integrationId } = props;
-    const { isHookTypeInbox } = useHook(integrationId);
-    return { isHookTypeInbox };
-  },
   data() {
     return {
       loading: {},
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index 51aa8190f..38deab634 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,17 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import { useHook } from './useHook';
+import hookMixin from './hookMixin';
 export default {
+  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup(props) {
-    const { isHookTypeInbox, hasConnectedHooks } = useHook(props.integration);
-    return { isHookTypeInbox, hasConnectedHooks };
-  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index aba526865..afaf059a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -2,19 +2,16 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import { useHook } from './useHook';
+import hookMixin from './hookMixin';
 
 export default {
+  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup(props) {
-    const { isHookTypeInbox } = useHook(props.integration);
-    return { isHookTypeInbox };
-  },
   data() {
     return {
       endPoint: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index 1a424063f..45ea83168 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,16 +1,13 @@
 <script>
-import { useHook } from './useHook';
+import hookMixin from './hookMixin';
 export default {
+  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup(props) {
-    const { hasConnectedHooks } = useHook(props.integration);
-    return { hasConnectedHooks };
-  },
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js
deleted file mode 100644
index c813d5fb0..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { computed, ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-
-export const useHook = (integrationObj, integrationId) => {
-  const store = useStore();
-  const integration = ref(null);
-  if (integrationId) {
-    integration.value =
-      store.getters['integrations/getIntegration'](integrationId);
-  } else {
-    integration.value = integrationObj;
-  }
-
-  const isHookTypeInbox = computed(() => {
-    return integration.value.hook_type === 'inbox';
-  });
-
-  const hasConnectedHooks = computed(() => {
-    return !!integration.value.hooks.length;
-  });
-
-  return {
-    isHookTypeInbox,
-    hasConnectedHooks,
-  };
-};