HTML не работал хорошо, когда я добавил app.js для конфигурации с файлом .vue

Question

Я включил <follow-button><follow-button> в основной файл и заменил тег <button> в файле .vue. Но HTML не показывал эту кнопку. Сначала в основной файл я добавил <button class="btn btn-primary ml-4">Follow</button> в основной HTML-файл, он работал отлично, как я и ожидал. Но, когда я сделал настроить, как показано ниже. И я использую это в 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>