为什么我无法在子组件为异步steup的时候，获取到子组件的方法

[2507483326]

我定义了一个异步子组件，我想在父组件中执行子组件中暴露出来的方法，但是不行，我想知道为什么，以及我该如何修改我的代码,
我的代码如下 父组件:

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import Comp from './Comp.vue'
const compRef  = ref(null)
const msg = ref('Hello World!')
onMounted(() => {
  nextTick(() => {
    console.log(compRef.value)
    compRef.value.test()
  })
})
</script>

<template>
  <Suspense>
    <comp ref="compRef"></comp>
  </Suspense>
</template>

子组件

<script setup>
import { ref } from 'vue'
await wait();
async function wait () {}
let change = ref(null)
defineExpose({test: () => {change.value = 'change'}})
</script>

<template>
    <div>child {{change}}</div>
</template>

我无法在父组件中执行test方法，设置change的值

演练场 异步

演练场 同步

可以看到演练场同步可以正确渲染change，而异步不可以

[edison1105]

<script setup>
import { ref } from 'vue'

// 写到 await 的上面
let change = ref(null)
defineExpose({test: () => {change.value = 'change'}})

await wait();
async function wait () {}

</script>

see #4930

[Justineo]

https://eslint.vuejs.org/rules/no-expose-after-await.html#vue-no-expose-after-await

This rule reports usages of expose() and defineExpose() after an await expression.
In the setup() function, expose() should be registered synchronously.
In the <script setup>, defineExpose() should be registered synchronously.