Vue 3 (Composition API) refs only work directly on ionic components?

Ionic Framework Ionic Vue
1

Hi, I’m trying to use Vue refs with the new composition API.
However, it seems to only work when the ref="" is set directly into an ionic component.

For example I have the following (minimized) template:

<ion-content ref="content">
    <div ref="canvas"></div>
</ion-content>

Then during setup():

const canvas = ref();
const content = ref();

onMounted(() => {
   console.log(content.value);
   console.log(canvas.value);
});

return {
   canvas,
   content
};

And the results show actual data from the ‘content’ element, but undefined for my ‘canvas’ div element:

Captura de Pantalla 2021-01-23 a la(s) 16.55.19
Captura de Pantalla 2021-01-23 a la(s) 16.55.191152×178 21.9 KB

Is there anything I’m missing? Any input greatly appreciated.

2

It works when I set a 1 second delay before getting its value.
Would be cool to know why though, since I was already calling it during onMounted() method.
I also tried using ionViewDidEnter hook, but it is still null there.

setTimeout(function () {
   console.log(canvas.value); // =>  <canvas... />
}, 1000);
3

I am not a vue user but at least you should not use the function keyword anymore, but fat arrow