Nuxt js - SSR page duplicates components

Question

I am generating a simple static page with a list of components and when I visit the page from another page it renders everything correctly. When I land directly on the page some of the components are rendered again after the footer. If I inspect the element I can see that they are the same elements but rendered again after the footer. Anyone has any idea on why this is happening?

<template>
  <div>
    <client-only>
      <MobileNav v-if="!isDesktop" />
      <Topnav v-if="isDesktop" />
      <div v-if="isDesktop">
        <Navbar active-page="consumers" />
      </div>
    </client-only>
    <Hero page="consumers" hero-text="for consumers" text-alignment="middle" />
    <AnchorNav :anchor-nav-items="anchorNavData" />

    <div id="for-consumers">
      <Highlight :data="highlight1" />
      <Highlight :data="highlight2" />
    </div>

    <LazyCardsWithModal :data="cardsList" />

    <LazyImageText :data="imageTextDirector" />

    <LazyKeyCards :data="keyCards" />

    <LazyAccordion :data="accordionData" />

    <LazyOrderedList :data="orderedList" />

    <LazyLogoCards :data="logoCards" :index="1" />
    <LazyLogoCards :data="logoCards2" :index="2" />

    <LazyCardsWithModal :data="productsCards" class="consumers-cards-2" />

    <Footer />

    <Modal
      v-show="this.$store.state.modal.active"
      :id="this.$store.state.modal.id"
    />
  </div>
</template>

This is what the page template looks like

Answer 1

Issue is with vuex state management when running it as static site. which works proper when running in the develop mode.

Ways to overcome this is.

1. avoiding the direct call to state variables in the template.
2. making use of client-only tag which helps to avoid dom-mismatch issue.