Vueのコンポーネントの記述がファイル名によって挙動が変わる

Question

実現したいこと

Vueでコンポーネントを書きたい。

前提

環境構築をdockerで行いました。
クイックスタートの例に倣って
$ npm init vue@latest [プロジェクト名]
で行いました。
ただ、意味がわからない状況なのですが、ファイル名によってコンポーネントを呼び出せたり、呼び出せない状況になっています。

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

ログイン画面を実装しようと思い、LoginForm.vueというファイルを作成し、下記のように記述しました。

<template>
    <p>ログイン</p>
</template>

そして呼び出し元で

<script setup>
  import LoginForm from './components/LoginForm.Vue';
</script>

<template>
  <LoginForm />
</template>

とするとエラーが発生し、

Internal server error: Failed to parse source for import analysis because the content contains
invalid JS syntax. You may need to install appropriate plugins to handle the .Vue file format, or if 
it's an asset, add "**/*.Vue" to `assetsInclude` in your configuration.

となります。
ただクイックスタートの時点でコンポーネントを作成してApp.vueの中で呼び出すということはしており、中でも<h2>タグ等を利用しているため、同じことなのに何故エラーになるのかが理解できません。

試したこと

そこでいろいろ試していたところVSCodeの話になりますが、ファイル名によって挙動が違うことに気づきました。
元からあったコンポーネントファイルでは、補完機能が働いており、
<template>と記述すると、閉じタグを補完で勝手に記述してくれます。
しかし、先ほど作成した「LoginForm.vue」では補完してくれません。
予測機能もこのようになっており(左横がabc)

逆に補完してくれるファイルはこのようになっています。(ツールマークのようなもの)

補完してくれるファイルのコンポーネント呼び出しは中身が全く同じでも正常に動作します。

いろいろ試したところ、補完してくれるファイルは

A,B,C,Z
Login,Easy,Welcome,SignupFormなど

補完してくれないファイルは

LoginForm,Money

でした。
最初に作ろうとしたファイルが補完してくれなかったものでつまづいてしまいましたが、あまり例はありませんでした。
しかし依然ファイル名によってコンポーネント呼び出しができないのは変わらず原因が気になっています。

Answer 1

VScodeの挙動がおかしかったからかもしれません。時間が経って、アプリを落とし、PCを再起動してから同じ事象には出会いませんでした

Answer 2

拡張子が大文字だからでしょうか？

import LoginForm from './components/LoginForm.vue';