I want to assign a reference to my VueJS-Component:

<audio
  ref="audioPlayer"
  controls
  controlsList="nodownload"
  preload="metadata"
>
  <source
    :src="audioUrl"
  />
</audio>

In the setup-function, I do

const audioPlayer = ref<HTMLElement|null>(null)

Unfortunately, inside onMounted it is still NULL. Even when I use nextTick, it is not assigned. Using a setTimeout with 500 or more milliseconds, it would be assigned to a value.

So I did a call to setInterval to see, how this ref-variable will change over time:

setInterval(() => {
   console.log("Audio-Ref:", audioPlayer.value);
}, 1000);

And the result is weird: sometimes it renders the Element, sometimes just NULL:

How can this be?