Vue.jsがの結果が反映されていない。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Vue.jsで四則演算を作っているのですがなぜか結果が反映されていないので助言をいただけるとありがたいです。

該当のソースコード

<<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div id="app" class="card-body">
                    <div class="d-flex justify-content-start mb-3">
                        <div class="mr-auto">
                            <span class="span-header">Lesson 2</span>
                        </div>
                        <div class="align-self-center">
                            <button type="button" class="btn btn-dark" @click="onBack">戻る</button>
                        </div>
                    </div>
                    <div id="app" class="mb-5">
                        <div class="quesion-header">１．入力値の合計を表示してください。</div>
                        <input type="number" v-model.number="left">
                        +
                        <input type="number" v-model.number="right">
                        =
                        <p>{{ total }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

export default {
    props: {
        total: Number,
    },
    data () {
        return {
            left: 0,
            right: 0,
            birthday: null,
            count: 0,
        }
    },
    mounted () {
        //
    },
    watch: {
        //
    },
    computed: {
        total() {
            return this.left + this.right
        },
        age() {
            //
        }
    },
    methods: {
        onBack() {
            this.$router.push({ name: 'home' })
        }
    },
}
</script>

<style lang="scss" scoped>
@import "resources/sass/variables";
</style>

app.js

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Vuex from 'vuex';
Vue.use(Vuex);

const router = new VueRouter({
    mode: 'history',
    routes: [
             { name: 'math', path: '/math', component: require('./components/vue/lesson2.vue').default }

{ path: '*', component: require('./components/commons/NotFoundComponent.vue').default },
]
});

const app = new Vue({
    el: '#app',
    store,
    router,
});

追記のエラー文

ERROR  Failed to compile with 1 errors                                      19:13:09

This dependency was not found:

* {{ asset('/resources/js/app.js') }}?vue&type=script&lang=js& in ./resources/js/components/lessons/Lesson2.vue

To install it, you can run: npm install --save {{ asset('/resources/js/app.js') }}?vue&type=script&lang=js&
       Asset      Size   Chunks             Chunk Names
/css/app.css   181 KiB  /js/app  [emitted]  /js/app
  /js/app.js  9.62 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/js/components/lessons/Lesson2.vue
Module not found: Error: Can't resolve '{{ asset('/resources/js/app.js') }}?vue&type=script&lang=js&' in '/Users/******(自分の名前のため伏せさせていただきました）/beginner-lesson1/resources/js/components/lessons'
 @ ./resources/js/components/lessons/Lesson2.vue 2:0-81 3:0-76 3:0-76 10:2-8
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code 2
npm ERR! path /Users/******/beginner-lesson1
npm ERR! command failed
npm ERR! command sh -c cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/******/.npm/_logs/2021-03-20T10_13_12_767Z-debug.log
npm ERR! code 2
npm ERR! path /Users/******/beginner-lesson1
npm ERR! command failed
npm ERR! command sh -c npm run development

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/******/.npm/_logs/2021-03-20T10_13_12_807Z-debug.log

補足情報（FW/ツールのバージョンなど）

Vue.js- version:2.6.12
npm 7.6.3
vue/cli 4.5.12
node.js v14.15.4
環境はMACです。
ここにより詳細な情報を記載してください。

Comments

[AbeTakashi]

情報不足すぎてかなり難解ですが、そもそもnpmコマンドもしくはyarnコマンドでデプロイメントとかちゃんとしてますか？ Vue.jsの導入方法や環境設定など含めて、もう少し周辺情報がないと誰も答えられないと思います。

[FKM]

たとえば、leftに３を打ち込んだだけの状態はどうなっていますか？totalに３が出ていなければ、そもそもVueが機能していません。

[natume4948]

TakashiAbeさん返信遅れて申し訳ございません。
npmはインストールしていてVue.jsの導入方法はSFCを使っています。情報不足のご指摘大変申し訳ございませんでした。npm等のversionなどの情報を追記しておきます。

[natume4948]

FKMさん　返信が遅れて大変申し訳ございませんでした。
leftもrightも0以外の数値を入れても変化はありませんでした。おっしゃる通りvueそのものが機能していませんでした。今その原因を探しています。
ご指摘ありがとうございました。

[AbeTakashi]

例えばnpm run devとかたたいてデプロイしたときに何かエラーメッセージみたいの出ていませんか？ 最初にも書きましたが、デプロイの状況が書かれていないため、他の人からは判断がつきにくく助言が出ないのではないかと思います。デプロイで問題起きてないのであれば、そこは明記しておくべきかと思います。Vueが機能しない場合はその辺が疑われるため、まずはデプロイの設定や状況を確認してみると良いと思います。

[natume4948]

返信ありがとうございます。npm run devを打ったときにThis dependency was not found:と出ました。Vue関連の状況を追記しておきます。
ご指摘ありがとうございます。

[AbeTakashi]

To install it, you can run: npm install --save {{ asset('/resources/js/app.js') }}?vue&type=script&lang=js&

と出ていますが、こちらの対応はしたのでしょうか？　エラーメッセージをしっかり読み取って都度対応を行い、エラーメッセージが出たらその都度質問欄へ追記してください。おそらくですが、Vue.jsのセットアップもデプロイもちゃんとできてないのだと思います。まずはVue.jsの基本から学ばれた方がいいのでは？と思います。
https://qiita.com/watataku8911/items/26f2ce546fcd562e4b46