Can not access dynamic ref inside $watch with $nextTick

[itsfaqih]

So I have something like this

<template x-for="item in items">
    <a :x-ref="`menu-${item.id}`" x-text="item.label" :href="item.href" @mouseenter="active = item.id"></a>
</template>

init() {
    this.$nextTick(() => {
        this.$watch('active', (value) => {
            if (value !== null) {
                this.$refs[`menu-${value}`].focus();
            }
        });
    });
}

But when I hover the menu item, it gives me this error.

Which means that the $watch run before it renders, or am I missing something?
I can assure you that it works if I don't use dynamic refs by the way, but I really need it to works using dynamic value because adding the id manually is time consuming.

[SimoTod]

You can't have dynamic ref in Alpine v3. See #1527 (comment)
You'll need to use something different, for example

<template x-for="item in items">
    <a :id="`menu-${item.id}`" x-text="item.label" :href="item.href" @mouseenter="active = item.id"></a>
</template>

init() {
    this.$nextTick(() => {
        this.$watch('active', (value) => {
            if (value !== null) {
                document.getElementById(`menu-${value}`).focus();
            }
        });
    });
}

[itsfaqih]

Ahh I see, I guess I'll just use what you suggested.
Thank you very much!