laravel vue js pusher

i making a test application using laravel 5.5 and vue js ,im using in pusher laravel echo . when i send message from the application i can see in "pusher.com" Debug Console that the message successful been send so i know its work. but i get nothing from the vue js Echo , i dont even get an error , what is wrong?

vue

  created(){
        window.axios.post('/message')
            .then((res) => {
                this.messages = res.data;
            }),
            Echo.join('chat')
                .listen('MessagePosted',(e)=>{
                    console.log(e)
                });
    }

bootstrap.js

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: '1a67166bcd6eb7ce7e67',
cluster: 'us2',
encrypted: true});

controller

  public function store(Request $request){

    $message = Auth::user()->messages()->create([
        'message' => $request->message,
    ]);

    event(new MessagePosted($message,Auth::user()));
    return ['status' => 'OK'];
}

model

class MessagePosted implements ShouldBroadcast

{ use Dispatchable, InteractsWithSockets, SerializesModels;

/**
 * @var Message
 *
 */

public $message;

public $user;
/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct(Message $message,User $user)
{

    $this->message = $message;
    $this->user = $user;

}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{

    return new PresenceChannel('chat');
}}

channels.php

Broadcast::channel('chat', function ($user) {
return $user;});

agein , when i send message from my site "pusher.com" recived the message in realtime , but i cant see nothing from the Echo , and i dont have any errors

someone can help?

via Chebli Mohamed