当我添加app.js以使用.vue文件进行配置时，HTML效果不佳

Question

我在主文件中包含了<follow-button><follow-button>，并替换了<button>文件中的.vue标签。但是HTML没有显示该按钮。首先在主文件中，我在主html文件中添加了<button class="btn btn-primary ml-4">Follow</button>，正如我期望的那样，它可以完美地工作。但是，当我进行如下配置时。我在laravel中使用它。我写了命令：

run dev watch

查看.vue文件中的更改。

我在app.js中的代码：

Vue.component('follow-button', require('./components/FollowButton.vue').default);

我在FollowButton.vue中的代码：

<template>
<div>
    <button class="btn btn-primary ml-4">Follow</button>
</div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

我的php：

<div class="col-9 pt-5">
        <div class="d-flex justify-content-between align-items-baseline">
            <div class="d-flex align-items-center pb-3">
                <div class="h4">{{ $user->username }}</div>

                <follow-button></follow-button>
        </div>

         @can('update', $user->profile)
            <a href="/p/create">Add New Post</a>
         @endcan
</div>