Chat event is not broadcast in private channel using pusher

I am working in pusher chat app...my private channel is connected and subscribed but my chat event is not broadcast...no error is showing in console log....i am using vue.js in laravel 5.8 with pusher 3.1..plz guide me what i am doing wrong

require('./bootstrap');

window.Vue = require('vue');

Vue.component('Chat', require('./components/Chat.vue').default);
Vue.component('chat-composer', require('./components/ChatComposer.vue').default);

const app = new Vue({
    el: '#app',
    data: {
        chats :''
    },
    created(){
        const userId = $('meta[name="userId"]').attr('content');
        const friendId = $('meta[name="friendId"]').attr('content');

        if(friendId != undefined){
            axios.post('/chatty/public/chat/getChat/' + friendId).then((response) =>{
                this.chats = response.data;
            });

        Echo.private('Chat.' + friendId + '.' + userId)
            .listen('BroadcastChat', (e) => {
                this.chats.push(e.chat);

            });
        }
    }
});


// Bulma NavBar Burger Script
document.addEventListener('DOMContentLoaded', function () {
    // Get all "navbar-burger" elements
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 0) {

        // Add a click event on each of them
        $navbarBurgers.forEach(function ($el) {
            $el.addEventListener('click', function () {

                // Get the target from the "data-target" attribute
                let target = $el.dataset.target;
                let $target = document.getElementById(target);

                // Toggle the class on both the "navbar-burger" and the "navbar-menu"
                $el.classList.toggle('is-active');
                $target.classList.toggle('is-active');

            });
        });
    }

});



require('./bulma-extensions');

via Chebli Mohamed