How to add two second hold time to hover action berfore it activates in pinia store with vuejs

Question

So I'm making a website for online store with item cards. I want to expand the card with more info and detailed description when the user hovers on it for 1.5sec - 2secs.

I first implented it to every single card and thus I had multiple windows popping off at the same time, so I transfered the hovered state to a pinia store that looks like this:

export const hoveredStore = defineStore('hovered', {
    state: () => {
        return {
            hovered: null
        }
    },
    actions: {
        hover (itemId) {
            if (this.hovered === null) {
                this.hovered = itemId
            }
        },
        unhover () {
            this.hovered = null;
        }
    }
})

And now in each card I have a v-if that checks if hovered is equal to the item id of the card and then shows the expanded window.

My problem is I don't know how to add the hold time.

I tried the answer from this question If mouse over for over 2 seconds then show else don't? and it looked something like that:

let timeoutId;
export const hoveredStore = defineStore('hovered', {
    state: () => {
        return {
            hovered: null
        }
    },
    actions: {
        hover (itemId) {
            if (this.hovered === null) {
                if (!timeoutId) {
                    timeoutId = setTimeout(function() {
                        timeoutId = null;
                        this.hovered = itemId;
                    }, 2000);
               }
           }
        },
        unhover () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
           }
            else {
                this.hovered = null;
           }
        }
    }
})

But it didn't work and I don't know how to fix it.
I would be grateful if someone can help me!