Laravel websockets chat system

Hi I am trying to build a laravel real time chat. I configured websockets and it seems to be connecting, but now I am trying to send a message is not working. I was following a tutorial in youtube did everything like in the tutorial and I dont know why I am receiving this errors. If you can have a look I would appreciate it.

Errors I am receiving

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
app.js:38405 [Vue warn]: Property or method "sendMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Chats> at resources/js/components/ChatsComponent.vue
       <Root>
warn @ app.js:38405
warnNonPresent @ app.js:39818
get @ app.js:39873
keyup @ app.js:37616
invokeWithErrorHandling @ app.js:39634
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:38405 [Vue warn]: Error in v-on handler: "TypeError: _vm.sendMessage is not a function"

found in

---> <Chats> at resources/js/components/ChatsComponent.vue
       <Root>
warn @ app.js:38405
logError @ app.js:39664
globalHandleError @ app.js:39659
handleError @ app.js:39619
invokeWithErrorHandling @ app.js:39642
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:39668 TypeError: _vm.sendMessage is not a function
    at keyup (app.js:37616)
    at invokeWithErrorHandling (app.js:39634)
    at HTMLInputElement.invoker (app.js:39959)
    at HTMLInputElement.original._wrapper (app.js:45318)
logError @ app.js:39668
globalHandleError @ app.js:39659
handleError @ app.js:39619
invokeWithErrorHandling @ app.js:39642
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:38405 [Vue warn]: Property or method "sendMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I created this function in the user class

 public function messages()
    {
        return $this->hasMany(Message::class);
    }

Messages class

class Message extends Model
{
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $fillable = ['message'];
    public function user()
    {
        return $this->belognsTo(User::class);
    }
}

Controller

use Illuminate\Http\Request; use App\Message;

class ChatsController extends Controller
{
    public function _construct(){
        $this->middleware('auth');
    }
    
    public function index()
    {
        return view('chats');
    }

    public function fetchMessages()
    {
        return Message::with('user')->get();
    }

    public function sendMessages(Request $request)
    {
       $message = auth()->user()->messages()->create([
            'message' => $request->message
        ]);

        return ['status' =>'success'];
    }
}

Vue chatsComponent

<template>
    <div class="row">
        <div class="col-8">
            <div class="card card-default">
                <div class="card-header">Messages</div>
                <div class="card-body p-0">
                    <ul class="list-unstyled" style="height:300px; overflow-y:scroll">
                        <li class="p-2" v-for="(message,index) in messages" :key="index">
                            <strong></strong>
                            
                        </li>
                    </ul>
                </div>

                <input
                    @keyup.enter="sendMessage"
                    v-model="newMessage"
                    type="text" 
                    name="message" 
                    placeholder="Enter your message..."
                    class="form-control">
            </div>
             <span class="text-muted">User is typing...</span>
        </div>

        <div class="col-4">
            <div class="card card-default">
                <div class="card-header">Active Users</div>
                <div class="card-body">
                    <ul>
                        <li class="py-2">Harish</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {

        props:['user'],

        data(){
            return {
                messages:[],
                newMessage:'',
            }
        },

        created(){
           this.fetchMessages();
        },

        methods:{
            fetchMessages(){
              axios.get('messages').then(response =>{
                this.messages = response.data
                })                
            },

            sendMessages(){
                this.messages.push({
                    user:this.user,
                    message:this.newMessage
                });
                
                axios.post('messages', {message: this.newMessage});

                this.newMessage='';
            }
        }
    }
</script>

chats view

@extends('layouts.app')

@section('content')
<div class="container">
    <chats :user=""></chats>
</div>
@endsection

route

Route::get('/chats','ChatsController@index')->middleware('auth');
Route::get('/messages','ChatsController@fetchMessages');
Route::post('/messages','ChatsController@sendMessages');

via Chebli Mohamed