Nuxt.js local site pages load data from Strapi only on landing, not navigating via <nuxt-link>

Question

I am populating my Nuxt.js site with data coming from Strapi.

I have my navigation in default.vue layout, simple like:

  <li v-for="page in pages" :key="page.id">
    <nuxt-link :to="page.slug"></nuxt-link>
  </li>

The urls render correctly and try to open the right page, however the page doesn't load as it's not able to load data from Strapi, for example:

Cannot read property 'title' of undefined

If, instead, I land directly on the page or simply refresh it, all the content gets loaded correctly.

So, for example, landing to localhost:3000/about works fine, but navigating to that page doesn't.

I guess there's something I am missing about how the data it's loaded in the first place.

I am querying all the pages in default.vue via Apollo to get the navigation

  apollo: {
    pages: {
      query: pagesQuery
    }
  }

And only the specific page inside index.vue or dynamic pages _slug.vue querying a single one:

  apollo: {
    pages: {
      query: pageQuery,
      variables () {
        return {
          "slug": this.$route.params.slug
        }
      }
    }

Hope it's clear and thanks in advance for your help!

Answer 1

After finding this similar question, looks like the solutions was to add

 v-if="pages[0] != null"

on the main element, and

  data() {
    return {
      pages: []
    }
  }

this seems to work, but not sure if there are other (better?) ways to handle it, so feel free to reply!

Thanks