computed property does not track it's dependencies when used with defineAsyncComponent
Vue version
3.2.45
Link to minimal reproduction
https://codesandbox.io/s/adoring-engelbart-6rfb5u?file=/src/MyComponent.vue
Steps to reproduce
- Open the sandbox and wait a moment until dynamic component is rendered and Title is appeared on top of the page.
- Try changing the route using provided links (below the title)
What is expected?
As we change the route, the number
param also changes and therefore, the dynamic component must update according to the new number.
What is actually happening?
Dynamic component is not changing when number changes, because computed
does not track it's dependency (in this example props.number
).
NOTE
When I put a console.log(props.number)
in the computed
, problem goes away!
System Info
No response
Any additional comments?
No response
That's expected though. () => import(componentList|props.number])
will run (and thus, props.number
will be accessed) when that component is actually being rendered, which happens long after the computed function has run and has collected its dependencies.