I have created a static page containing various components. When I navigate to this page from another page, everything displays correctly. However, when I directly land on the page, some components are duplicated and rendered again after the footer. Upon inspecting the elements, I noticed that they are indeed the same elements but repeated after the footer. Any insights into why this might be 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 showcases the structure of the page template.