Property change in combination with render function and top level await crashes component
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-nnbt7j?file=src%2Fuse-render-slow-component.js,src%2FApp.vue
Steps to reproduce
Open the stackblitz link and change the input value within 7 seconds.
I already started a discussion https://github.com/vuejs/core/discussions/7202. liulinboyi gave me some workarounds (thanks again), however I am more interested in the actual cause and if I am doing something wrong with the render function or if it is a bug in Vue.
What is expected?
After 7 seconds the current input value should be shown below the input.
What is actually happening?
In the console you will see and error:
and the component is crashed - nothing will be shown.
System Info
System:
OS: macOS 13.0.1
CPU: (8) arm64 Apple M1
Memory: 109.22 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Chrome: 107.0.5304.110
Safari: 16.1
Any additional comments?
No response
the root cause is
// Comp is not an async component.
const { Comp } = useRenderSlowComponent()
see workaround