diff --git a/app/javascript/packs/vue/action_toolbar.js b/app/javascript/packs/vue/action_toolbar.js
index 4267a8d8c..1a85db360 100644
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@@ -2,7 +2,7 @@
 
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ActionToolbar from '../../vue/components/action_toolbar.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initActionToolbar = () => {
 
@@ -10,7 +10,6 @@ window.initActionToolbar = () => {
     const app = createApp({});
     app.component('ActionToolbar', ActionToolbar);
     app.config.globalProperties.i18n = window.I18n;
-    app.mount('#actionToolbar');
-    handleTurbolinks(app);
+    mountWithTurbolinks(app, '#actionToolbar');
   }
 }
diff --git a/app/javascript/packs/vue/assign_items_to_task_modal.js b/app/javascript/packs/vue/assign_items_to_task_modal.js
index 4669f571c..e51e5b0d0 100644
--- a/app/javascript/packs/vue/assign_items_to_task_modal.js
+++ b/app/javascript/packs/vue/assign_items_to_task_modal.js
@@ -3,7 +3,7 @@ import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import AssignItemsToTaskModalContainer from '../../vue/assign_items_to_tasks_modal/container.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 function initAssignItemsToTaskModalComponent() {
   const container = $('.assign-items-to-task-modal-container');
@@ -34,10 +34,7 @@ function initAssignItemsToTaskModalComponent() {
     app.component('AssignItemsToTaskModalContainer', AssignItemsToTaskModalContainer);
     app.use(PerfectScrollbar);
     app.config.globalProperties.i18n = window.I18n;
-    app.mount('.assign-items-to-task-modal-container');
-    handleTurbolinks(app);
-
-    window.AssignItemsToTaskModalComponentContainer = app;
+    window.AssignItemsToTaskModalComponentContainer = mountWithTurbolinks(app, '.assign-items-to-task-modal-container');
   }
 }
 
diff --git a/app/javascript/packs/vue/directives/outside_click.js b/app/javascript/packs/vue/directives/outside_click.js
deleted file mode 100644
index 6265c4adc..000000000
--- a/app/javascript/packs/vue/directives/outside_click.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Use this to register outside-click directive on a Vue component
-// eslint-disable-next-line max-len
-// eg v-click-outside="{handler: 'handlerToTrigger', exclude: [refs to ignore on click (eg 'searchInput', 'searchInputBtn')]}"
-// eslint-enable-next-line max-len
-
-export default {
-  bind(el, binding, vnode) {
-    el._vueClickOutside_ = (e) => {
-      let clickedOnExcludedEl = false;
-      const { exclude } = binding.value;
-      exclude.forEach(refName => {
-        if (!clickedOnExcludedEl) {
-          const excludedEl = vnode.context.$refs[refName];
-          if (!excludedEl) return;
-
-          clickedOnExcludedEl = (excludedEl._isVue ? excludedEl.$el : excludedEl).contains(e.target);
-        }
-      });
-
-      if (!el.contains(e.target) && !clickedOnExcludedEl) {
-        const { handler } = binding.value;
-        vnode.context[handler]();
-      }
-    };
-
-    document.addEventListener('click', el._vueClickOutside_);
-    document.addEventListener('touchstart', el._vueClickOutside_);
-  },
-  unbind(el) {
-    document.removeEventListener('click', el._vueClickOutside_);
-    document.removeEventListener('touchstart', el._vueClickOutside_);
-    el._vueClickOutside_ = null;
-  }
-};
diff --git a/app/javascript/packs/vue/export_stock_consumption_modal.js b/app/javascript/packs/vue/export_stock_consumption_modal.js
index 9726faf94..06de24354 100644
--- a/app/javascript/packs/vue/export_stock_consumption_modal.js
+++ b/app/javascript/packs/vue/export_stock_consumption_modal.js
@@ -1,7 +1,7 @@
 /* global notTurbolinksPreview */
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ExportStockConsumptionModal from '../../vue/repository_row/export_stock_consumption_modal.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initExportStockConsumptionModal = () => {
   if (window.exportStockConsumptionModalComponent) return;
@@ -10,7 +10,6 @@ window.initExportStockConsumptionModal = () => {
     const app = createApp({});
     app.component('ExportStockConsumptionModal', ExportStockConsumptionModal);
     app.config.globalProperties.i18n = window.I18n;
-    app.mount('#exportStockConsumtionModal');
-    handleTurbolinks(app);
+    mountWithTurbolinks(app, '#exportStockConsumtionModal');
   }
 };
diff --git a/app/javascript/packs/vue/helpers/turbolinks.js b/app/javascript/packs/vue/helpers/turbolinks.js
index 83a89cf4c..e55491baf 100644
--- a/app/javascript/packs/vue/helpers/turbolinks.js
+++ b/app/javascript/packs/vue/helpers/turbolinks.js
@@ -1,7 +1,12 @@
-function handleTurbolinks(app) {
+function mountWithTurbolinks(app, target) {
+  const originalHtml = document.querySelector(target).innerHTML;
+
   document.addEventListener('turbolinks:before-cache', () => {
     app.unmount();
+    document.querySelector(target).innerHTML = originalHtml;
   }, { once: true });
+
+  return app.mount(target);
 }
 
-export { handleTurbolinks };
\ No newline at end of file
+export { mountWithTurbolinks };
diff --git a/app/javascript/packs/vue/label_template.js b/app/javascript/packs/vue/label_template.js
index c5923350e..135184800 100644
--- a/app/javascript/packs/vue/label_template.js
+++ b/app/javascript/packs/vue/label_template.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import LabelTemplateContainer from '../../vue/label_template/container.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initLabelTemplateComponent = () => {
   const app = createApp({
@@ -15,8 +15,7 @@ window.initLabelTemplateComponent = () => {
   });
   app.component('LabelTemplateContainer', LabelTemplateContainer);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount('#labelTemplateContainer');
-  handleTurbolinks(app);
+  mountWithTurbolinks(app, '#labelTemplateContainer');
 };
 
 initLabelTemplateComponent();
diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js
index 9729ffd4f..8acdfa231 100644
--- a/app/javascript/packs/vue/legacy/datetime_picker.js
+++ b/app/javascript/packs/vue/legacy/datetime_picker.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import DateTimePicker from '../../../vue/shared/date_time_picker.vue';
-import { handleTurbolinks } from '../helpers/turbolinks.js';
+import { mountWithTurbolinks } from '../helpers/turbolinks.js';
 /*
 <div  id="date-time-picker" class="vue-date-time-picker">
   <input ref="input" type="hidden" v-model="date" id="legacy-id" data-default="" />
@@ -66,8 +66,7 @@ window.initDateTimePickerComponent = (id) => {
   });
   app.component('DateTimePicker', DateTimePicker);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount(id);
-  handleTurbolinks(app);
+  mountWithTurbolinks(app, id);
 };
 
 document.addEventListener('turbolinks:load', () => {
diff --git a/app/javascript/packs/vue/navigation/breadcrumbs.js b/app/javascript/packs/vue/navigation/breadcrumbs.js
index dc79e25b1..e2cbd7bbc 100644
--- a/app/javascript/packs/vue/navigation/breadcrumbs.js
+++ b/app/javascript/packs/vue/navigation/breadcrumbs.js
@@ -3,13 +3,11 @@ import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import Breadcrumbs from '../../../vue/navigation/breadcrumbs/breadcrumbs.vue';
-import { handleTurbolinks } from '../helpers/turbolinks.js';
+import { mountWithTurbolinks } from '../helpers/turbolinks.js';
 
 
 const app = createApp({});
 app.component('Breadcrumbs', Breadcrumbs);
 app.use(PerfectScrollbar);
 app.config.globalProperties.i18n = window.I18n;
-app.mount('#breadcrumbs');
-handleTurbolinks(app);
-window.breadcrumbsComponent = app;
+window.breadcrumbsComponent = mountWithTurbolinks(app, '#breadcrumbs');
diff --git a/app/javascript/packs/vue/navigation/navigator.js b/app/javascript/packs/vue/navigation/navigator.js
index 3e87f5aa7..3b3c7afad 100644
--- a/app/javascript/packs/vue/navigation/navigator.js
+++ b/app/javascript/packs/vue/navigation/navigator.js
@@ -47,9 +47,7 @@ function addNavigationNavigatorContainer() {
   app.component('NavigatorContainer', NavigatorContainer);
   app.use(PerfectScrollbar);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount('#sciNavigationNavigatorContainer');
-
-  window.navigatorContainer = app;
+  window.navigatorContainer = app.mount('#sciNavigationNavigatorContainer');
 }
 
 if (document.readyState !== 'loading') {
diff --git a/app/javascript/packs/vue/navigation/top_menu.js b/app/javascript/packs/vue/navigation/top_menu.js
index 9ccad2446..5b2d92e4d 100644
--- a/app/javascript/packs/vue/navigation/top_menu.js
+++ b/app/javascript/packs/vue/navigation/top_menu.js
@@ -2,13 +2,11 @@ import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
-import outsideClick from '../directives/outside_click';
 
 function addNavigationTopMenuContainer() {
   const app = createApp({});
   app.component('TopMenuContainer', TopMenuContainer);
   app.use(PerfectScrollbar);
-  app.directive('click-outside', outsideClick);
   app.config.globalProperties.i18n = window.I18n;
   app.mount('#sciNavigationTopMenuContainer');
 }
diff --git a/app/javascript/packs/vue/open_vector_editor.js b/app/javascript/packs/vue/open_vector_editor.js
index 2057c0154..145b99c8c 100644
--- a/app/javascript/packs/vue/open_vector_editor.js
+++ b/app/javascript/packs/vue/open_vector_editor.js
@@ -1,9 +1,8 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import OpenVectorEditor from '../../vue/ove/OpenVectorEditor.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 const app = createApp({});
 app.component('OpenVectorEditor', OpenVectorEditor);
 app.config.globalProperties.i18n = window.I18n;
-app.mount('#open-vector-editor');
-handleTurbolinks(app);
+mountWithTurbolinks(app, '#open-vector-editor');
diff --git a/app/javascript/packs/vue/protocol.js b/app/javascript/packs/vue/protocol.js
index c3cf7eb9c..08e28408a 100644
--- a/app/javascript/packs/vue/protocol.js
+++ b/app/javascript/packs/vue/protocol.js
@@ -3,8 +3,7 @@
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolContainer from '../../vue/protocol/container.vue';
-import outsideClick from './directives/outside_click';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initProtocolComponent = () => {
   const app = createApp({
@@ -16,13 +15,11 @@ window.initProtocolComponent = () => {
   });
   app.component('ProtocolContainer', ProtocolContainer);
   app.use(PerfectScrollbar);
-  app.directive('click-outside', outsideClick);
   app.config.globalProperties.i18n = window.I18n;
   app.config.globalProperties.inlineEditing = window.inlineEditing;
   app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
   app.config.globalProperties.dateFormat = $('#protocolContainer').data('date-format');
-  app.mount('#protocolContainer');
-  handleTurbolinks(app);
+  mountWithTurbolinks(app, '#protocolContainer');
 
   $('.protocols-show').on('click', '#protocol-versions-modal .delete-draft', (e) => {
     const url = e.currentTarget.dataset.url;
diff --git a/app/javascript/packs/vue/protocol_file_import_modal.js b/app/javascript/packs/vue/protocol_file_import_modal.js
index f0b3d8016..c8ba7fcc7 100644
--- a/app/javascript/packs/vue/protocol_file_import_modal.js
+++ b/app/javascript/packs/vue/protocol_file_import_modal.js
@@ -1,13 +1,12 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolFileImportModal from '../../vue/protocol_import/file_import_modal.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initProtocolFileImportModalComponent = () => {
   const app = createApp({});
   app.component('ProtocolFileImportModal', ProtocolFileImportModal);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount('#protocolFileImportModal');
-  handleTurbolinks(app);
+  mountWithTurbolinks(app, '#protocolFileImportModal');
 };
 
 initProtocolFileImportModalComponent();
diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 74be66ca9..7bf5cb65b 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -2,7 +2,7 @@
 
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import FilterContainer from '../../vue/repository_filter/container.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 const DEFAULT_FILTERS = [
   {
@@ -150,8 +150,7 @@ window.initRepositoryFilter = () => {
   app.component('FilterContainer', FilterContainer);
   app.config.globalProperties.i18n = window.I18n;
   app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
-  app.mount('#filterContainer');
-  handleTurbolinks(app);
+  window.repositoryFilterObject = mountWithTurbolinks(app, '#filterContainer');
 
   $('#filterContainer').on('click', (e) => {
     $('#filterContainer .dropdown-selector-container').removeClass('open')
@@ -161,6 +160,4 @@ window.initRepositoryFilter = () => {
   $('#filtersDropdownButton').on('show.bs.dropdown', () => {
     $('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
   });
-
-  window.repositoryFilterObject = app;
 };
diff --git a/app/javascript/packs/vue/repository_item_sidebar.js b/app/javascript/packs/vue/repository_item_sidebar.js
index 7c134b677..a1fa981c5 100644
--- a/app/javascript/packs/vue/repository_item_sidebar.js
+++ b/app/javascript/packs/vue/repository_item_sidebar.js
@@ -2,15 +2,14 @@
 
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 
 function initRepositoryItemSidebar() {
   const app = createApp({});
   app.component('RepositoryItemSidebar', RepositoryItemSidebar);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount('#repositoryItemSidebar');
-  handleTurbolinks(app);
+  mountWithTurbolinks(app, '#repositoryItemSidebar');
 }
 
 initRepositoryItemSidebar();
diff --git a/app/javascript/packs/vue/repository_print_modal.js b/app/javascript/packs/vue/repository_print_modal.js
index 935d1431b..064ee2dc5 100644
--- a/app/javascript/packs/vue/repository_print_modal.js
+++ b/app/javascript/packs/vue/repository_print_modal.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import PrintModalContainer from '../../vue/repository_print_modal/container.vue';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 function initPrintModalComponent() {
   const container = $('.print-label-modal-container');
@@ -30,9 +30,7 @@ function initPrintModalComponent() {
     });
     app.component('PrintModalContainer', PrintModalContainer);
     app.config.globalProperties.i18n = window.I18n;
-    app.mount('.print-label-modal-container');
-    handleTurbolinks(app);
-    window.PrintModalComponent = app;
+    mountWithTurbolinks(app, '.print-label-modal-container');
   }
 }
 
diff --git a/app/javascript/packs/vue/repository_search.js b/app/javascript/packs/vue/repository_search.js
index abf9791ef..2a65789c0 100644
--- a/app/javascript/packs/vue/repository_search.js
+++ b/app/javascript/packs/vue/repository_search.js
@@ -1,15 +1,10 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositorySearchContainer from '../../vue/repository_search/container.vue';
-import outsideClick from './directives/outside_click';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initRepositorySearch = () => {
   const app = createApp({});
   app.component('RepositorySearchContainer', RepositorySearchContainer);
-  app.directive('click-outside', outsideClick);
   app.config.globalProperties.i18n = window.I18n;
-  app.mount('#inventorySearchComponent');
-  handleTurbolinks(app);
-
-  window.RepositorySearchComponent = app;
+  mountWithTurbolinks(app, '#inventorySearchComponent');
 }
diff --git a/app/javascript/packs/vue/results.js b/app/javascript/packs/vue/results.js
index 8e4f5757a..fc0d84640 100644
--- a/app/javascript/packs/vue/results.js
+++ b/app/javascript/packs/vue/results.js
@@ -1,14 +1,11 @@
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import Results from '../../vue/results/results.vue';
-import outsideClick from './directives/outside_click';
-import { handleTurbolinks } from './helpers/turbolinks.js';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 const app = createApp({});
 app.component('Results', Results);
 app.use(PerfectScrollbar);
-app.directive('click-outside', outsideClick);
 app.config.globalProperties.i18n = window.I18n;
 app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
-app.mount('#results');
-handleTurbolinks(app);
+mountWithTurbolinks(app, '#results');
diff --git a/app/javascript/vue/navigation/navigator.vue b/app/javascript/vue/navigation/navigator.vue
index 43fe6b33e..432f70548 100644
--- a/app/javascript/vue/navigation/navigator.vue
+++ b/app/javascript/vue/navigation/navigator.vue
@@ -12,7 +12,7 @@
     @resizing="onResizeMove"
     @resize-end="onResizeEnd"
   >
-    <div class="ml-4 h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
+    <div class="ml-4 h-full w-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
       <div class="px-3 py-2.5 flex items-center relative leading-4">
         <i class="sn-icon sn-icon-navigator"></i>
         <div class="font-bold text-base pl-3">
diff --git a/app/javascript/vue/repository_search/container.vue b/app/javascript/vue/repository_search/container.vue
index 4c4caad78..2f3c4d798 100644
--- a/app/javascript/vue/repository_search/container.vue
+++ b/app/javascript/vue/repository_search/container.vue
@@ -1,7 +1,7 @@
 <template>
-  <div 
-    class="flex items-center mr-3 flex-nowrap relative" 
-    v-click-outside="{handler: 'closeSearchInputs', exclude: ['searchInput', 'searchInputBtn', 'barcodeSearchInput', 'barcodeSearchInputBtn']}"
+  <div
+    class="flex items-center mr-3 flex-nowrap relative"
+    v-click-outside="closeSearchInputs"
   >
     <button :class="{hidden: searchOpened}" ref='searchInputBtn' class="btn btn-light btn-black icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch">
       <i class="sn-icon sn-icon-search"></i>
@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { vOnClickOutside } from '@vueuse/components'
+
 export default {
   name: 'RepositorySearchContainer',
   data() {
@@ -45,6 +47,9 @@ export default {
       value: ''
     }
   },
+  directives: {
+    'click-outside': vOnClickOutside
+  },
   watch: {
     barcodeValue() {
       this.updateRepositoySearch();
diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue
index 308b2ed24..abf36a63f 100644
--- a/app/javascript/vue/shared/menu_dropdown.vue
+++ b/app/javascript/vue/shared/menu_dropdown.vue
@@ -15,7 +15,7 @@
             '!mb-0': !openUp,
          }"
          v-if="showMenu"
-         v-click-outside="{handler: 'closeMenu', exclude: ['openBtn', 'flyout']}">
+         v-click-outside="closeMenu">
       <span v-for="(item, i) in listItems" :key="i" class="contents">
         <div v-if="item.dividerBefore" class="border-0 border-t border-solid border-sn-light-grey"></div>
         <a :href="item.url" v-if="!item.submenu"
@@ -64,6 +64,7 @@
 <script>
 
 import isInViewPort from './isInViewPort.js';
+import { vOnClickOutside } from '@vueuse/components'
 
 export default {
   name: 'DropdownMenu',
@@ -81,6 +82,9 @@ export default {
       openUp: false
     }
   },
+  directives: {
+    'click-outside': vOnClickOutside
+  },
   watch: {
     showMenu() {
       if (this.showMenu) {
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index 12c1689e6..8512e48ae 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{ handler: 'close', exclude: ['optionsContainer'] }" @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
+  <div v-click-outside="close" @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
     <slot>
       <button ref="focusElement" class="sn-select__value">
         <span>{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
@@ -37,7 +37,7 @@
   </div>
 </template>
 <script>
-  import outsideClick from '../../packs/vue/directives/outside_click';
+  import { vOnClickOutside } from '@vueuse/components'
 
   export default {
     name: 'Select',
@@ -50,7 +50,7 @@
       disabled: { type: Boolean, default: false }
     },
     directives: {
-      'click-outside': outsideClick
+      'click-outside': vOnClickOutside
     },
     data() {
       return {
diff --git a/package.json b/package.json
index 502d6564e..ad35f317d 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "@teselagen/ove": "^0.3.23",
     "@vue/compiler-sfc": "^3.3.4",
     "@vuepic/vue-datepicker": "^7.2.0",
+    "@vueuse/components": "^10.5.0",
+    "@vueuse/core": "^10.5.0",
     "ajv": "6.12.6",
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
diff --git a/yarn.lock b/yarn.lock
index f0a10cf95..56b50a18d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1650,6 +1650,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/web-bluetooth@^0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz#74bd1c8fd3a2058cb6fc76b188fcded50a83d866"
+  integrity sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==
+
 "@types/yauzl@^2.9.1":
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.1.tgz#4e8f299f0934d60f36c74f59cb5a8483fd786691"
@@ -1767,6 +1772,37 @@
     date-fns "^2.30.0"
     date-fns-tz "^1.3.7"
 
+"@vueuse/components@^10.5.0":
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.5.0.tgz#fdb8c20e3d9bf52a32be8c59dd389fa37acabd09"
+  integrity sha512-zWQZ8zkNBvX++VHfyiUaQ4otb+4PWI8679GR8FvdrNnj+01LXnqvrkyKd8yTCMJ9nHqwRRTJikS5fu4Zspn9DQ==
+  dependencies:
+    "@vueuse/core" "10.5.0"
+    "@vueuse/shared" "10.5.0"
+    vue-demi ">=0.14.6"
+
+"@vueuse/core@10.5.0", "@vueuse/core@^10.5.0":
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.5.0.tgz#04d1e6d26592bb997bb755a4830ea7583c3e8612"
+  integrity sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.18"
+    "@vueuse/metadata" "10.5.0"
+    "@vueuse/shared" "10.5.0"
+    vue-demi ">=0.14.6"
+
+"@vueuse/metadata@10.5.0":
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.5.0.tgz#7501a88cf5cbf7a515a03f0b8bbe3cecf30cad11"
+  integrity sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==
+
+"@vueuse/shared@10.5.0":
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.5.0.tgz#b3ac8c190a5dae41db5e1b60fe304a9b4247393c"
+  integrity sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==
+  dependencies:
+    vue-demi ">=0.14.6"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -7776,6 +7812,11 @@ vm-browserify@^1.1.2:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@>=0.14.6:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
 vue-loader@^16.0.0:
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"