Version

3.2.2

Reproduction link

https://codesandbox.io/s/amazing-currying-750nd?file=/src/App.vue

Steps to reproduce

1. Both ComponentA and ComponentB should be asynchronusly imported
2. Refresh page

What is expected?

On console we see that mounted is twice triggered

What is actually happening?

Mounted should be triggered once

Following the migration guide to vue 3 we saw this: https://v3.vuejs.org/guide/migration/vnode-lifecycle-events.html#overview

So we have tried to follow the rules.

1.The first thing that we have observed was that vnode-created seems to not supported any more.

2. The second one and relevant to this topic was (as title mentions) vnode-mounted seems to triggered twice when component is declared with defineAsyncComponent. The problem here is that, the first time that mounted is triggered, the component is not actually mounted. (there is no element rendered).

We want to render ComponentB when ComponentA is mounted, but ComponentB is rendered before ComponentA is mounted because as mentioned above, the first “vnode-mounted” trigger is lets say “fake”.

We are no sure what is the problem here.

Of course there is a workaround, we can emit an event to App.vue from ComponentA, when it will be mounted, but we like this vnode-mounted, it’s very handy