Vue.jsで単一コンポーネントファイルをimportできない

前提・実現したいこと

Vue.jsで .vueファイルのテンプレートをインポートしたいです。
他のサイトや、買った本を参考にコードを書いたのですが、うまくimportできません。
どなたかわかる方おられませんか？

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

Uncaught SyntaxError: Cannot use import statement outside a module

該当のソースコード

該当のjsとvueファイルは同じアプリケーションルート>public>js ディレクトリにあります。

javascript
1import myComponent from './select-year.vue';
2new Vue({
3  el:'#app',
4  components:{myComponent},
5  template:'<select-year></select-year>'
6})

vue
1<template>
2  <div>
3    <form>
4    <input type="hidden" id= "oldYear" value={{$year}}>
5    </form>
6    <select id="year" class="col-2 offset-md-2">
7      <option value="2019">2019</option>
8      <option value="2020">2020</option>
9      <option value="2021">2021</option>
10      <option value="2022">2022</option>
11      <option value="2023">2023</option>
12      <option value="2024">2024</option>
13    </select>
14  </div>
15</template>

HTML
1<script type="text/javascript" src="{{ URL::asset('js/302_read_book_aggregate.js')}}"></script>

試したこと

HTML側の呼び出し部を<script type="module">に変更してみたところ以下のエラーメッセージに変化した。

select-year.vue:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.