Tengo dificultades para agregar una directiva vue a mi aplicación que detecta clics fuera de un elemento.

Lo instalé con npm y lo importé en mi scripttag así:

 import clickOutside from './node_modules/vue-detect-click-outside/index.js';

Entonces lo uso así:

 let app = Vue.createApp({ // Data to work with data: function(){ return{ // Object to fill with JSON response results:[], } }, mounted () { document.addEventListener("keyup", this.nextItem); }, // Methods contains function that fire upon the (computed) data methods:{ clickedOutside() { console.log("clicked outside"); } } }) app.mount('#v_search');

Pero obtengo: No se pudo resolver la directiva: haga clic fuera

Agregué la función en un botón para probar así:

 <button type="submit" @click.prevent="fetchResults" class="searchButton" v-click-outside="{ handler: 'clickedOutside', exclude: ['excluded'] }">

¿Qué estoy haciendo mal? No usé la CLI ni nada para iniciar un proyecto. Primero construí mi proyecto en jquery y ahora estoy tratando de convertirlo a Vue.