Nuxt.js + поиск Algolia + Click Outside

Я работаю над проектом Nuxt.js с поиском Algolia. У меня все работает, кроме закрытия раскрывающегося списка поиска при нажатии вне поля. Я просмотрел так много ресурсов, и ничего не хочет работать.

Вот где я посмотрел:

Обнаружить щелчок вне элемента в nuxt

Обнаружить щелчок за пределами элемента

Обнаружение щелчка вне элемента на Vue 3

Кто-нибудь сможет помочь, пожалуйста?

Вот текущий код, который у меня есть:

плагины / click-outside.js

import Vue from 'vue';

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
            console.info(el);
            // here I check that click was outside the el and his childrens
            if (!(el == event.target || el.contains(event.target))) {
            // and if it did, call method provided in attribute value
                vnode.context[binding.expression](event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent)
    },
});

index.vue

<template>
    <div class = "hello">
        <div v-click-outside = "closeDropdown">
            Hello
        </div>
    </div>
</template>
<script>
methods: {
        closeDropdown() {
            console.info("Clicked outside closeDropdown!");
        },
}
</script>