vue.js - Nuxtjs no data when redirect between pages

Question

I have a default header which is defined in /layouts as below

<v-app-bar :elevation="0" color="white" fixed app>
  <div class="w-100">
    <NuxtLink to="/">
      <v-img
        max-height="24"
        src="/nuxt_static/images/rectangle.png"
        :contain="true"
      ></v-img>
    </NuxtLink>
  </div>
</v-app-bar>
<v-main>
  <v-container style="padding: 0">
    <nuxt />
  </v-container>
</v-main>

I want that when I click on the image rectangle.png it will redirect to homepage. Homepage is defined in the first child index.vue of /pages/ directory with asyncData() function and a component contains it's template. When I enter http://example.com/ into browser, everything works fine. But when I'm in another page and click on the header image to go to homepage, it just displays the template and doesn't run through asyncData() function. Therefore, there is no data on homepage. What should I do for now?

Answer 1

Try to move your code in asyncData hook to fetch hook. Fetch hook will be called both in server side or client side.