example-alert.vue

<template>
    <div class="container">
        <div v-if="alertMessage" class="alert alert-secondary invisible" role="alert">{{alertMessage}}</div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Chat</div>

                    <div class="panel-body">
                        <ul>
                            <li v-for="item in messages">{{ item.message }} - <i>{{ item.user }}</i></li>
                        </ul>

                        <input type="text" v-model="message"><br />
                        <button class="btn btn-success" @click="send()">Send!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                messages: [],
                message: '',
                alertMessage: '',
            }
        },

        methods: {
            send() {
                axios.post('/message', {message: this.message})
                    .then((response) => {
                        this.message = '';
                    });
            }
        },

        mounted() {
            Echo.channel('messages')
                .listen('.newMessage', (message) => {
                    this.messages.push(message);
                    this.alertMessage = `Message recieved: ${message}`;
                    setTimeout(() => {
                      alertMessage = '';
                    }, 2000);

                });
        }
    }
</script>