nuxt: asyncData not updating correctly using watchQuery (HMR, dev mode)

Version

v2.8.1

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-lfoy3?fontsize=14

Steps to reproduce

Click the Change query randomly to see asyncData working. It will update the current route’s query and display this value on the page.

Now change in ~/pages/index.vue:

await new Promise(resolve => setTimeout(resolve, 1000));

//await new Promise(resolve => setTimeout(resolve, 1000));

Press save.
Wait until compilation is done.
See that it is broken when clicking the link.
Remove the // comment, so that it’s restored back to normal.
Press save.
See that it is still broken.

What is expected ?

asyncData should be called. And the data should be updated with the return value.

What is actually happening?

asyncData is being called. However, the return value is not updating the components data though.

<div align="right">_{This bug report is available on Nuxt community (#c9432)}</div>

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 10
Comments: 15

Most upvoted comments

I found I was getting this issue because I was using the keep-alive property on my <nuxt /> element. Because of this the page data was cached and so when the query changed asyncData was fired but never updated the data. To resolve this I added a key on my page based on the route query and it worked! How to use key

Hope this helps someone

epndavis on Oct 1, 2020