diff --git a/package-lock.json b/package-lock.json
index 343d2364..74d6e6b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,6 @@
         "vee-validate": "3.2.4",
         "vue": "2.7.14",
         "vue-awesome": "4.0.2",
-        "vue-click-outside": "1.0.7",
         "vue-flatpickr-component": "8.1.5",
         "vue-gtag": "1.1.2",
         "vue-i18n": "8.15.3",
@@ -34776,11 +34775,6 @@
         "vue": "^2.0.0"
       }
     },
-    "node_modules/vue-click-outside": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
-      "integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
-    },
     "node_modules/vue-docgen-api": {
       "version": "4.56.2",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.56.2.tgz",
@@ -63128,11 +63122,6 @@
       "integrity": "sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==",
       "requires": {}
     },
-    "vue-click-outside": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
-      "integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
-    },
     "vue-docgen-api": {
       "version": "4.56.2",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.56.2.tgz",
diff --git a/package.json b/package.json
index 43ee2be8..d79580cf 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "vee-validate": "3.2.4",
     "vue": "2.7.14",
     "vue-awesome": "4.0.2",
-    "vue-click-outside": "1.0.7",
     "vue-flatpickr-component": "8.1.5",
     "vue-gtag": "1.1.2",
     "vue-i18n": "8.15.3",
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 3d9b8810..8b1eea04 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="search-bar" v-ClickOutside="hideSuggestions">
+  <section class="search-bar" ref="autocomplete">
     <div class="input-group">
       <b-form-input
         :class="`search-input ${showSuggestions ? 'has-suggestions' : ''}`"
@@ -12,6 +12,7 @@
       />
       <div class="input-group-append">
         <button type="button" class="btn btn-outline-primary"
+          ref="searchButton"
           :title="$tc('placeholder.search', filterCount)"
           @click="submit({ type: 'string', q })"
         >
@@ -105,12 +106,13 @@
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside'
+import { ref } from 'vue'
 import { mapStores } from 'pinia'
 import FilterFactory from '@/models/FilterFactory'
 import { useAutocompleteStore } from '@/stores/autocomplete'
 import { useUserStore } from '@/stores/user'
 import Explorer from './Explorer'
+import { useClickOutside } from '@/composables/useClickOutside'
 
 const AVAILABLE_TYPES = ['mention', 'newspaper', 'topic', 'location', 'person', 'collection']
 
@@ -151,6 +153,15 @@ export default {
       default: () => [],
     },
   },
+  beforeMount() {
+    const autocomplete = ref(this.$refs.autocomplete)
+    const button = ref(this.$refs.searchButton)
+    useClickOutside(
+      autocomplete,
+      () => this.hideSuggestions(),
+      button,
+    )
+  },
   computed: {
     ...mapStores(useAutocompleteStore, useUserStore),
     user() {
@@ -376,9 +387,6 @@ export default {
   components: {
     Explorer,
   },
-  directives: {
-    ClickOutside,
-  },
 }
 </script>