laravel 5.4 Vue Component не работает

у меня есть Chat-User.vue файл в таких компонентах, как

<template lang="html">
<div class="chat-user">
<a href="#" class="close" v-on:click="hideUsers">&times;</a>
<h1>Users in Chat Room</h1>
<hr />
Number of users = {{ usersInRoom.length }}
<div class="users" style="overflow: hidden;">
<div class="col-sm-3 w3-margin-bottom" v-for="userInRoom in usersInRoom" style="overflow: hidden;">
<div class="u-1">
<img :src="userInRoom.profile" width="50" height="50">
</div>
<div class="u-2">
{{ userInRoom.name }}
</div>
</div>
</div>
</div>
</template>

<script>
export default {
props: ['usersInRoom']
}
</script>

мой app.js файл

Vue.component('chat-user', require('./components/Chat-User.vue'));

const app = new Vue({
el: '#app',
data: {
usersInRoom: []
},
});

и indx.blade.php файл

<div id="app">
<chat-user v-bind:usersInRoom="usersInRoom"></chat-user>
</div>

В usersInRoom переменная это добавит данные автоматически.

Но когда я смотрю в браузере, я не вижу ничего на месте <chat-user></chat-user>, Только лишь <!---->,

Я думаю, что это было закомментировано vue по какой-то причине. Я пытался удалить все {{ usersInRoom }} и тогда я могу видеть другие вещи, как <h1>Users in Chat Room</h1> и <hr>,

если я не ошибаюсь Файл компонента не распознает ни одну переменную, например usersInRoom, когда у меня есть такая переменная.

Пожалуйста, кто-нибудь, скажите мне, как решить эту проблему.