focused/blur events on the component

[dextromethorphanum]

Hello, I have a question with a default input events: focused and blur. How do I use them correctly to make them work as well as they do on simple inputs?

I tried it like this (this is a variant of the version before the changing to currency-input component):
<currency-input v-model="value" class="cell-input" :class="{ error: hasError }" @focus.prevent="focused = true" @blur="focused = false" />,
and now it does not working.

I decided to pass events from a component, but that didn't work either:

<input
ref="inputRef"
type="text"
@focused="focused"
@blur="blur"
>

export default {
...

methods: {
    focused() {
        this.$emit('focused');
    },
    
    blur() {
        this.$emit('blur');
    }
}

}

Is there some solution I missed?

[dextromethorphanum]

Solved with the help of Stackoverflow and ChatGPT. Code of the component: CurrencyInput.vue