Почему мои компоненты Nuxt / Vue рендерится дважды в инструментах Vue dev?

Question

Мой AppHeader и компоненты визуализируются дважды с помощью инструментов Vue Dev. Я проверил мой код в макете и дважды проверил мои страницы. Я не уверен, почему это рендеринг дважды. Я потратил целую неделю, пытаясь это исправить ... есть ли другие файлы, на которые я должен смотреть?

Вот мой код в файле макета:

<template>
  <div class="page-container">
    <!-- Loading -->
    <div v-if="isLoadingPageData">Loading...</div>
    <!-- Error -->
    <div v-else-if="loadPageDataError">Something went wrong.</div>
    <AppHeader />
    <nuxt class="page-content" />
    <AppFooter />

  </div>
</template>

<script>
import { mapState } from 'vuex'
import AppHeader from '../components/AppHeader'
import AppFooter from '../components/AppFooter'

export default {
  components: {
    AppHeader,
    AppFooter
  },

  computed: {
    ...mapState([
      'isLoadingPageData',
      'loadPageDataError',
      'pageData'
    ])
  },
}
</script>

<style lang="scss" scoped>

* {
  box-sizing: border-box;
}

.page-content {
  padding-top: 90px;
  min-height: 100vh;
}

</style>

Код Appheader :

<template v-else-if="pageData">
  <header>
    <div class="main-header">

      <div class="container">
        <h1 class="logo">
          <a href="https://www.pxlagency.com/">
            <div class="logo-letter">
              <img src="../assets/svg/pxl-logo-p.svg">
            </div>
            <div class="logo-letter">
              <img src="../assets/svg/pxl-logo-x.svg">
            </div>
            <div class="logo-letter">
              <img src="../assets/svg/pxl-logo-l.svg">
            </div>
          </a>
        </h1>

        <nav class="main-nav">
          <ul class="nav-links">
            <li><nuxt-link to="/our-work">Our Work</nuxt-link></li>
            <li><nuxt-link to="/who-we-are">Who We Are</nuxt-link></li>
            <li class="dropdown"><nuxt-link to="/what we do">What We Do</nuxt-link>
              <ul class="dropdown-content">
                <li><nuxt-link to="/creative">Creative</nuxt-link></li>
                <li><nuxt-link to="/strategy">Strategy</nuxt-link></li>
                <li><nuxt-link to="/technology">Technology</nuxt-link></li>
              </ul>
            </li>
            <li><nuxt-link to="/pxl-products">PXL Products</nuxt-link></li>
            <li><nuxt-link to="/contact">Contact</nuxt-link></li>
          </ul>
        </nav>

      </div>
    </div>
  </header>
</template>

<script>

export default {
  name: 'AppHeader',
};

</script>

<style lang="scss" scoped>
header{
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   width: 100%;
   background: #FFF;
   z-index: 99;
}

.container {
position: relative;
max-width: 100%;
padding: 10px;
margin: 0 auto;
}

.logo{
position: relative;
z-index: 5;
margin-left: 20px;
margin-bottom: 0;
}

.logo a {
display: block;
}

.logo-letter {
  position: absolute;
}

img {
  width: 80px;
}

.main-header .container {
display: flex;
justify-content: space-between;
}

.main-nav li {
display: inline;
position: relative;
font-size: .75rem;
}

.main-nav a {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: #aeaeae;
font-family: AvenirNextLTW01-Medium,Helvetica,Roboto,Arial,sans-serif;
font-weight: 400
// font-size: 1rem;
}
.nav-links{
display: flex;
}

a:hover {
  color: black;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: #aeaeae;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {color: black;}

.dropdown:hover .dropdown-content {
  display: block;
}

</style>

ОШИБКА в ИНСТРУМЕНТАХ DEV: