laravel 5.4 Vue Component not workng - php

Question

I have a Chat-User.vue file in components like
<template lang="html">
<div class="chat-user">
×
<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>
My app.js file
Vue.component('chat-user', require('./components/Chat-User.vue'));
const app = new Vue({
el: '#app',
data: {
usersInRoom: []
},
});
and the indx.blade.php file
<div id="app">
<chat-user v-bind:usersInRoom="usersInRoom"></chat-user>
</div>
In usersInRoom variable it will add data's automatically.
But when I look the browser I cannot see any thing in the place of <chat-user></chat-user>, Just only <!---->.
I think it was commented out by vue for some reason. I tried removing all {{ usersInRoom }} and then I can see the other things like <h1>Users in Chat Room</h1> and the <hr>.
if I am not wrong The component file is not recognizing any variable like usersInRoom, when I have a variable like that.
Please some one tell me how to fix this problem.

Answer 1

Html directives are case insensitive, in the documentation Vue mentions that you need to use kebab-case in binding props.
Try <chat-user v-bind:users-in-room="usersInRoom"></chat-user> Which will bind to the usersInRoom prop.

Answer 2

you cant use camel case for props. u need to to use kebab case.
and binding from vue 1, you can remove the "v-bind" string and just directly start at :
<chat-user :users-in-room="usersInRoom"></chat-user>