Vueで複数のコンポーネントを表示したい

Question

###現状
私はTypeScriptとVueの勉強をはじめました。
そして複数のコンポーネントをインポートをして表示させる方法を調べています。
ですが今はエラーが発生していて解決する方法がわかりません。

searchForm.tsファイルでどちらかのコンポーネントを削除すると
エラーなく起動できます。

ファイルを分けているため見づらかもしれませんがわかる方お願いします。

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

This dependency was not found:

* @/components/atmos/icons/searchIcon.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/
dist/cjs.js??ref--14-0!./node_modules/ts-loader??ref--14-2!./node_modules/eslint-loader??ref--13-0!./src/components/molecules/searchForm.ts?vue&type=script&
lang=js&

To install it, you can run: npm install --save @/components/atmos/icons/searchIcon.vue
Type checking in progress...
No type errors found

該当のソースコード

<template>
    <v-text-field label="Solo" placeholder="Placeholder" solo></v-text-field>
</template>
<script src="./fieldInput.ts"></script>

import { Component, Vue } from "vue-property-decorator";
@Component
export default class FieldInput extends Vue {}

<template>
    <v-icon>fas fa-search</v-icon>
</template>
<script src='./searchIcon.ts'></script>

import { Component, Vue } from "vue-property-decorator";
@Component
export default class SearchIcon extends Vue {}

<template>
  <div>
    <searchIcon></searchIcon>
    <fieldInput></fieldInput>
  </div>
</template>
<script src="./searchForm.ts"></script>

import { Component, Vue } from "vue-property-decorator";
import searchIcon from "@/components/atmos/icons/searchIcon.vue";
import fieldInput from "@/components/atmos/inputs/fieldInput.vue";

@Component({
  components: {
    fieldInput,
    searchIcon
  }
})
export default class SerachForm extends Vue {}

Answer 1

内容そのままでファイル作り直したらできました。