【vue3】 npm run dev で Vue packages version mismatch: になる

前提・実現したいこと

以下にあるvueのコンポーネントをビルドしたいです。
/backend/resources/js/common/PageHeaderComponent.vue

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

dockerを立ち上げ、docker-compose exec app bashコンテナに入って、npm run devを実行すると、バージョンのミスマッチ、とエラーが出ます。以下のエラーが表示されます。
ただ、package.jsonファイル内のバージョンは、2つとも、記載されている通りにしています。

Vue packages version mismatch:

- vue@3.0.5 (/work/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/work/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

ERROR in ./resources/js/common/PageHeaderComponent.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/work/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/work/node_modules/vue-loader/lib/index.js:67:22)

webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

該当のソースコード

js
1// /backend/resources/js/common/PageHeaderComponent.vue
2
3<template>
4    <header id="header">サンプル</header>
5</template>
6<script>
7    export default {
8
9    }
10</script>

json
1// /backend/package.json
2
3{
4    "private": true,
5    "scripts": {
6        "dev": "npm run development",
7        "development": "mix",
8        "watch": "mix watch",
9        "watch-poll": "mix watch -- --watch-options-poll=1000",
10        "hot": "mix watch --hot",
11        "build": "webpack --mode development",
12        "prod": "webpack --mode production",
13        "production": "mix --production"
14    },
15    "devDependencies": {
16        "@vue/compiler-sfc": "^3.0.5",
17        "axios": "^0.21.1",
18        "bootstrap": "^4.0.0",
19        "css-loader": "^5.0.1",
20        "extract-text-webpack-plugin": "^3.0.2",
21        "fibers": "^5.0.0",
22        "jquery": "^3.2",
23        "laravel-mix": "^6.0.0-beta.17",
24        "lodash": "^4.17.19",
25        "mini-css-extract-plugin": "^1.3.5",
26        "popper.js": "^1.12",
27        "postcss": "^8.1.14",
28        "resolve-url-loader": "^3.1.0",
29        "return": "^1.0.0",
30        "sass": "^1.32.6",
31        "sass-loader": "^8.0.2",
32        "vue": "^3.0.5",
33        "vue-loader": "^15.9.6",
34        "vue-router": "^3.5.1",
35        "vue-template-compiler": "^2.6.12",
36        "webpack": "^5.21.1",
37        "webpack-cli": "^4.5.0"
38    },
39    "dependencies": {
40        "n": "^7.0.1",
41        "stable": "^0.1.8",
42        "style-loader": "^2.0.0",
43        "uikit": "^3.6.15-dev.6e8f9ad2d",
44        "vue-lazyload": "^1.3.3"
45    }
46}

js
1// /backend/webpack.config.js
2
3const path = require('path');
4
5const MiniCssExtractPlugin = require("mini-css-extract-plugin");
6const ExtractTextPlugin = require("extract-text-webpack-plugin");
7
8module.exports = {
9    watch: true,
10    // JS
11    entry: path.join(__dirname, "/public/js", "main.js"),
12    output: {
13        path: path.join(__dirname, "/public/js"),
14        filename: 'bundle.js'
15    },
16    module: {
17        rules: [
18        {
19            test: /.scss$/i,
20            use: [
21            {
22                loader: MiniCssExtractPlugin.loader,
23            },
24            {
25                loader: 'css-loader',
26            },
27            {
28                loader: 'sass-loader',
29                options: {
30                sassOptions: {
31                    outputStyle: 'expanded',
32                },
33                },
34            }]  
35        }]
36    },
37    plugins: [
38        new MiniCssExtractPlugin({
39            filename: './style.css',
40            ignoreOrder: true,
41        })
42    ]
43};

js
1// /backend/resources/js/app.js
2
3import { createApp } from 'vue'
4
5import PageHeaderComponent from './common/PageHeaderComponent.vue'
6
7createApp({ components:{
8    'page-header-component': PageHeaderComponent,
9}}).mount('#app');
10

試したこと

１．node_module　package.lock.jsonを削除して、再インストール
２．npm i vue
[参考] https://qiita.com/Ryosuke27/items/c4e6ce444084e850de38
３．vue-router vue-template-compilerの再インストール