$nextTick() Runs Before x-transition Has Finished

[onepom]

I believe $nextTick() is being triggered before Alpine has made its reactive DOM updates.

I've got a dropdown component that when it is opened it scrolls to the currently selected item or to the top of the list. This is the code that handles it:

openDropdown() {
    this.open = true;
    ...
    this.$nextTick(() => {
        this.$refs.list.children[this.currentIndex].scrollIntoView();
    });
}

The problem is when I introduce transitions it stops working.

<div x-show="open"
     x-transition:enter="transition ease-in duration-100 origin-top"
     x-transition:enter-start="transform scale-y-0"
     x-transition:enter-end="transform scale-y-100"
>

If I leave the transitions in place and replace $nextTick with setTimeout it works again albeit a bit hacky.

setTimeout(() => {
    this.$refs.list.children[this.currentIndex].scrollIntoView() 
}, 50);