[Vue warn]: Property or method "modelInfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.Whenever I try to fetch data, this error message pops up
<template>
<main>
{{ modelInfo }}
</main>
</template>
<script>
import searchByNameQ from '~/apollo/queries/models/searchByNameq'
export default {
async asyncData({ $strapi }) {
// Fetching model information
const modelInfo = await $strapi.graphql({
query: searchByNameQ.loc.source.body,
variables: { name: ['Transit Custom'] }
})
return {
modelInfo
}
}
}
</script>
This code works perfectly fine when refreshing the page or using nuxt-link. However, it throws an error with hot module update. The output of modelInfo looks like this:
{
"models": [{
"id": "2",
"name": "Transit Custom",
"size": "mellem"
}]
}
UPDATE: I have identified the source of the error. While the code is correct, the issue is caused by a configuration setting in nuxt.config
I had added this setting to resolve a Google Analytics problem. Once this config is removed, the error disappears.
features: { transitions: false },