Version

3.0.3

Reproduction link

https://codepen.io/ShookLyngs/pen/gOwObGG

Steps to reproduce

1. import component by using defineAsyncComponent(), for example component item
2. define ref in template, for example <item ref="item" />
3. access ref in manual event callback, like @click
4. access funcion in component item
5. using this.$refs.item.do(), fail
6. using this.$refs.item.$refs.item.do(), success

What is expected?

access ref by this.$refs.item.

What is actually happening?

have to access ref by using this.$refs.item.$refs.item.

Looks like the ref is pointing to the AsyncWrapper instead

Looks like the ref is pointing to the AsyncWrapper instead

Yes, and if I have a component item, its content is simply:

<template>
  <slot />
</template>

Then when I use this component, and pass a async-component to fill the slot:

<item>
  <async-component />
</item>

In component item, I tried to get this.$el in mounted() or in $nextTick(), but it just won't work. What can I do to get the content of component item?

ref on async component should be fixed by the commit above, but since it's async, you can't just access this.$el in mounted anyway. You'll have to wait until the async component is actually loaded (which can take unknown amount of time). So you should use a ref (after the fix is released).