Why is a data () entry empty when [HMR] updates a component with a async fetch ()


I am getting behavior in Nuxt.js I do not understand.

In a component I am successfully fetching data to this.myData and working with it in a computed property this.myComputedData. But when the component is updated in development, let’s say because I added a console.log statement, this.myComputedData is empty again and I get this error »TypeError: Cannot read properties of undefined«.

It seems that async fetch () is called again when the component updates, with is okay. But the weird thing I do not understand is why this.myData is reset, as if fetch wasn’t called before and the data wasn’t populated.

I currently ether write the data to a vex store where it stays populated (but this is not always wanted and/or possible) or fallback to fallback data this.myComputedData, which does not look nice because the content disappears for a moment.

Does anybody have a better solution or ideas why this happens?

Bye, Mato.

Hi @matovincetic,

Since it’s a more Nuxt-related topic and has nothing to do with Storyblok, I think you’ll find better help if you post it on the Stackoverflow Nuxt community or other community more nuxt-focused.

If you do, as an extra suggestion it’d be great if you share a code example, otherwise not sure if you’d find much help :wink:

Hey, thanks for the tip! I going to try my luck there.