Subscribe on changes!

computed property does not track it's dependencies when used with defineAsyncComponent

avatar
Feb 19th 2023

Vue version

3.2.45

Link to minimal reproduction

https://codesandbox.io/s/adoring-engelbart-6rfb5u?file=/src/MyComponent.vue

Steps to reproduce

  1. Open the sandbox and wait a moment until dynamic component is rendered and Title is appeared on top of the page.
  2. 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

avatar
Feb 19th 2023

That's expected though. () => import(componentList|props.number]) will run (and thus, props.numberwill be accessed) when that component is actually being rendered, which happens long after the computed function has run and has collected its dependencies.

avatar
Feb 20th 2023

@LinusBorg So why the Title does not change when I change the route?

avatar
Feb 20th 2023

I just explained that, I think. The computed property never refreshes because props.number can't be collected as a dependency - because it's read asynchronously outside the computed's context. so the component always stays the same.