[Vue.js]Cannot find module '~/components/TheHeader.vue'が解消できません[Nuxt.js]

Question

前提・実現したいこと

Nuxt.js初学者で技術書やネット記事を参考にアプリを作成しています。
ログイン画面を作成中に

Cannot find module '~/components/TheHeader.vue'

というエラーがローカル（ブラウザ）に出てしまい解消できないという状況です。

発生している問題・エラーメッセージ

Cannot find module '~/components/TheHeader.vue'

該当のソースコード

**app/pages/index.vue (ログインページ)**

<template>
  <section class="container">
    <div v-if="isWaiting">
      <p>読み込み中</p>
    </div>
    <div v-else>
      <div v-if="!isLogin">
        <div>
          <p>
            <input
              v-model="email"
              type="text"
              placeholder="email"
            >
          </p>
          <p>
            <input
              v-model="password"
              type="password"
              placeholder="password"
            >
          </p>
          <p>
            <input
              id="checkbox"
              v-model="register"
              type="checkbox"
            >
            <label for="checkbox">新規登録</label>
          </p>
          <button @click="passwordLogin">{{ register ? '新規登録' : 'ログイン' }}</button>
          <p>{{ errorMessage }}</p>
        </div>
      </div>
      <div v-else>
        <p>{{ user.email }}でログイン中</p>
        <button @click="logOut">ログアウト</button>
      </div>
    </div>
  </section>
</template>

<script>
import moment from '~/plugins/moment'
import { mapGetters } from 'vuex'
import Theheader from '~/components/TheHeader.vue'

export default {
  asyncData () {
    return {
      register: false,
      isWaiting: true,
      isLogin: false,
      user: [],
      email: '',
      password: '',
      errorMessage: ''
    }
  },
  mounted: function () {
    firebase.auth().onAuthStateChanged(user => {
      this.isWaiting = false
      this.errorMessage = ''
      if (user) {
        this.isLogin = true
        this.user = user
      } else {
        this.isLogin = false
        this.user = []
      };
    })
  },
  methods: {
    passwordLogin () {
      const email = this.email
      const password = this.password
      if (this.register) {
        firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
          const errorMessage = error.message
          this.errorMessage = errorMessage
        }.bind(this))
      } else {
        firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
          const errorMessage = error.message
          this.errorMessage = errorMessage
        }.bind(this))
      }
    },
    logOut () {
      firebase.auth().signOut()
    }
  }
}
</script>

**app/componensts/TheHeader.vue**

<template>
  <el-menu mode="horizontal" :router="true">
    <el-menu-item index="1" style="pointer-events:none;">
      Football-App
    </el-menu-item>
    <el-menu-item index="2" :route="{ path: '/posts/' }">
      投稿一覧
    </el-menu-item>

    <no-ssr>
      <el-menu-item index="4" style="float: right;" :route="{ path: `/users/${user.id}` }" v-if="user">
        <span>{{user.id}}</span>
      </el-menu-item>
      <el-menu-item index="4" style="float: right;" :route="{ path: '/' }" v-else>
        <span>ログイン</span>
      </el-menu-item>
    </no-ssr>
    <el-menu-item index="5" style="float: right" :route="{ path: '/posts/new' }">
      新規投稿
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['user'])
  }
}
</script>

試したこと

このエラーについて調べてみたところ、コンポーネントの読み込みがうまくいかず起こるエラーのようですが、上記のコードにも記した通り

<div slot="header" class="clearfix">

import moment from '~/plugins/moment'
import { mapGetters } from 'vuex'
import Theheader from '~/components/TheHeader.vue'

で読み込めてる状態かと思うのですがなんらかの過不足があるからエラーが出ているのだと思います。（全く見当違いなところで問題が起きている可能性もありますが）。

・追記
firebaseの方でメール/パスワードでの認証を有効にしないと認証できないという記事を読み有効にしたのですが問題は解決できませんでした

この問題の解決法がわかる方がいらっしゃいましたらアドバイスお願いします。