javascript-将我的Vue视图添加到laravel后没有输出

我试图连接我的 Vue Games.vue 视图，但无法从这个模板获取我的信息到 laravel 中的模板刀片，我不明白这里有什么问题。

Games.vue

如您所见，我在这里编写代码。

<template>

    <h1>New Vue View</h1>

</template>

<script>

export default {

    mounted() {

        console.log('Component mounted.')

    }

}

</script>

games.blade.php

我调用了 app.js 文件中声明的方法，它应该在这里显示我来自 Games.vue 的信息

@extends('modal')

@section('content')

    <div class="container">

        <h1 class="text-center my-5">Llista de jocs</h1>

        <table class="table table-dark table-bordered">

            <th>Número</th>

            <th>Nom</th>

            <th>Organització</th>

            @auth

                @if(Auth::user()->isAdmin())

                    <th>Opcions

                        <a class="btn btn-success float-lg-end" href="/games/create">Crear Joc</a>

                    </th>

                @endif

            @endauth

            @foreach($games as $game)

                <tr>

                    <td>{{$game->id}}</td>

                    <td>{{$game->name}}</td>

                    <td>{{$game->organization}}</td>

                    @auth

                        @if(Auth::user()->isAdmin())

                            <td>

                                <a class="btn btn-primary" href="/games/edit/{{$game->id}}">Edita</a>

                                <a class="btn btn-danger" href="/games/delete/{{$game->id}}">Elimina</a>

                            </td>

                        @endif

                    @endauth

                </tr>

            @endforeach

        </table>

    </div>

    <div id="app" class="content">

        <games-component></games-component>

    </div>

    <script src="{{mix('js/app.js')}}"></script>

@endsection

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('games-component', require('./components/games/Games.vue'));

const app = new Vue({

    el: '#app'

});

我的输出：https ://i.stack.imgur.com/1ctw3.png