When referencing an asynchronous component, it is not possible to correctly obtain the exposed properties and methods from the reference.

[AOMANDESHANGXIAO]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNq1Vl1v2jAU/StX2UOChEiT7YkBWtf1YXvYqsLbMk1puIG0IY5iB5gq/vuu7SQmIaVr1SFEsO/XOfbxdR6tyzwfbUu0xtaER0WSC+AoynwWZMkmZ4WARyg5LnCTp6HAW4zhAHHBNmBTlP2xcbvkf7Loim28yjpymxmZv8fTP/H0O540lTdOclDbI5ZxAWEVRqA8mHZgOnZt9mhkD3qC/DNBfivIxPSEGKMJWIfZMsWrNIkeKMIZwHQGj0EGkMTgHOMebcO0xIE2ArguLNYICeUIswiBxRowRMSeZZgJiMIM7hBWSFWwQB0nq7IURylbGQ4mvz1sLVZVtCm5ZjvcYjEEQbVxnzOOSyAEgpBwKLMlxgn9LE9rnWYdCeRiLmNV/kMPadrm/0q6yt8mXRd9W9JV1qdIG8fnKb+YcTc58T2p11Q7JWkKiD6S3VSnFOk7cXXPoG5BA1GdChoBTOYlzzHjekTj2grvaGXDMpVB0kAm0zsKjKeBdXxyA2s2Ma2kTua2arWyx2Ga3oXRg0m/TLazlIXLJFt1heVNXGntzTpxWxReQ8jvEJJdpUXIf2tC/gsIqfaqAZrdVvCkRfvclUKwDD5FspWR41FjI0+pTqkLLamJq70pslXZGlqCk7biZDW65yyju0Ydg8CSsJMUix+5SEh7gTWuDwitWZqy3Tc1J4oSh/V8tMbooWf+nu/lXGDdFMix2GJgNTYRFgRVm6/n33FP/xvjhi3LlLzPGG+RzkUpMWq3z9QeCPaRn0L7VV1btCsLfr0XtNA1KQlUnRrlH1h0jcklfoq6gft+9KE+bbSKrRu158bWdw+FztkGv4QipLtH6+PoBirIuaBnhju4obs14eg4tGQs3eJgOqtAUMpFskFWCscxszJaOTq253nyupNzhyF4FxcXui/QL6ENd2HSQuLQfKB7Kl6rPuSonE1XGYMdyo9N8eR7rrM0AudlFCHnIM+COQjeSItdu3WVWL9G9CzfOXSK72uhtY/oOXStNyEDkYyyedMrUdVq9Fbqhj6Gn3YD1P6lJKYXQxFzfg/pHU670vbUKvsnregdV3rplUvLsSOajq1fOl35qHEtK/14QkrSpEnprZKfYzHRZplkz99Wz2jKP6Opw18jpMXj

Steps to reproduce

An error will occur when you try to use the properties or methods exposed by an asynchronous component. Whether you use defineExpose to expose them in the setup function or use expose in a non-setup environment, you won't be able to correctly obtain the exposed properties and methods.
The playground link: https://play.vuejs.org/#eNq1Vl1v2jAU/StX2UOChEiT7YkBWtf1YXvYqsLbMk1puIG0IY5iB5gq/vuu7SQmIaVr1SFEsO/XOfbxdR6tyzwfbUu0xtaER0WSC+AoynwWZMkmZ4WARyg5LnCTp6HAW4zhAHHBNmBTlP2xcbvkf7Loim28yjpymxmZv8fTP/H0O540lTdOclDbI5ZxAWEVRqA8mHZgOnZt9mhkD3qC/DNBfivIxPSEGKMJWIfZMsWrNIkeKMIZwHQGj0EGkMTgHOMebcO0xIE2ArguLNYICeUIswiBxRowRMSeZZgJiMIM7hBWSFWwQB0nq7IURylbGQ4mvz1sLVZVtCm5ZjvcYjEEQbVxnzOOSyAEgpBwKLMlxgn9LE9rnWYdCeRiLmNV/kMPadrm/0q6yt8mXRd9W9JV1qdIG8fnKb+YcTc58T2p11Q7JWkKiD6S3VSnFOk7cXXPoG5BA1GdChoBTOYlzzHjekTj2grvaGXDMpVB0kAm0zsKjKeBdXxyA2s2Ma2kTua2arWyx2Ga3oXRg0m/TLazlIXLJFt1heVNXGntzTpxWxReQ8jvEJJdpUXIf2tC/gsIqfaqAZrdVvCkRfvclUKwDD5FspWR41FjI0+pTqkLLamJq70pslXZGlqCk7biZDW65yyju0Ydg8CSsJMUix+5SEh7gTWuDwitWZqy3Tc1J4oSh/V8tMbooWf+nu/lXGDdFMix2GJgNTYRFgRVm6/n33FP/xvjhi3LlLzPGG+RzkUpMWq3z9QeCPaRn0L7VV1btCsLfr0XtNA1KQlUnRrlH1h0jcklfoq6gft+9KE+bbSKrRu158bWdw+FztkGv4QipLtH6+PoBirIuaBnhju4obs14eg4tGQs3eJgOqtAUMpFskFWCscxszJaOTq253nyupNzhyF4FxcXui/QL6ENd2HSQuLQfKB7Kl6rPuSonE1XGYMdyo9N8eR7rrM0AudlFCHnIM+COQjeSItdu3WVWL9G9CzfOXSK72uhtY/oOXStNyEDkYyyedMrUdVq9Fbqhj6Gn3YD1P6lJKYXQxFzfg/pHU670vbUKvsnregdV3rplUvLsSOajq1fOl35qHEtK/14QkrSpEnprZKfYzHRZplkz99Wz2jKP6Opw18jpMXj
App.vue

<script setup>
import { useTemplateRef } from 'vue';
import AsyncCom1 from './AsyncCom1.vue';
import AsyncCom2 from './AsyncCom2.vue';
import Comp from './Comp.vue';
const asyncComRef1 = useTemplateRef('asyncCom1Ref')
const asyncComRef2 = useTemplateRef('asyncCom2Ref')
const syncComRef = useTemplateRef('syncComRef')
const handleClick = () => {
  if (asyncComRef1.value) {
    // The instance of async component can be get here
    console.log('asyncComRef1.value', asyncComRef1.value)
    // however, the exposed state is undefinded
    console.log(asyncComRef1.value.testState)
  }
  if (asyncComRef2.value) {
    // The instance of async component can be get here
    console.log('asyncComRef2.value', asyncComRef2.value)
    // however, the exposed state is undefinded
    console.log(asyncComRef2.value.testState)
  }
  if (syncComRef.value) {
    // The instance of sync component can be get here
    console.log('syncComRef.value', syncComRef.value)
    // the exposed state can be getted
    console.log(syncComRef.value.testState)
  }
}
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncCom1 ref="asyncCom1Ref"></AsyncCom1>
    </template>
    <template #fallback>
      <div>loading async component1</div>
    </template>
  </Suspense>
  <Suspense>
    <template #default>
      <AsyncCom2 ref="asyncCom2Ref"></AsyncCom2>
    </template>
    <template #fallback>
      <div>loading async component2</div>
    </template>
  </Suspense>
  <Comp ref="syncComRef"></Comp>
  <button @click="handleClick">get test state</button>
</template>

async com1

<script setup>
const getSomeData = async () => {
  return  new Promise((resolve)=>{
    setTimeout(()=>{
      resolve('111')
    }, 1000)
  })
}
await getSomeData()

defineExpose({
  testState: 'aaaaa'
})
</script>

<template>
  <div>
   success load async com1.
  </div>
</template>

async com2

<script>
export default {
  expose: ['testState'],
  async setup(_, { expose }) {
    const getSomeData = async () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('111')
        }, 1000)
      })
    }
    await getSomeData()

    expose({
      testState: ''
    })
  }
}
</script>

<template>
  <div>
   success load async com2.
  </div>
</template>

com.vue

<script setup>
defineExpose({
  testState:'111'
})
</script>

<template>
  <div>
   success load sync component
  </div>
</template>

What is expected?

The referencing component should be able to correctly access and use the properties and methods exposed by the asynchronous component without errors, whether exposed by defineExpose in setup or expose in non-setup environments.

What is actually happening?

An error occurs when trying to use the properties and methods exposed by an asynchronous component. Whether exposed by defineExpose in setup or expose in non - setup environments, the referencing component cannot access these exposed elements correctly.

System Info

Any additional comments?

No response

[edison1105]

duplicate of #4930