I am struggling to add a vue directive to my app that detects clicks outside of an element.

I installed it with npm and imported it in my scripttag like this:

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

I then use it like this:

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');

But I get: Failed to resolve directive: click-outside

I added the function on a button to test like this:

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

What am I doing wrong? I didn’t use the CLI or anything to start a project. I built my project in jquery first and am now trying to convert it to Vue.