laravel echo not listen on Presence Channels with pusher

i am broadcast on Presence Channel but it's not working with laravel-echo but i got the api message on pusher but i can't got it with laravel echo at client side and it's work with public channel every thing working correctly anyone can help me to figure out what's wrong ? here is my code blade file :

@extends('layouts.app')

@section('content')

        <chat-room></chat-room>

@endsection

vue component :

  <div class="container">

        <div class="row">

         <div class="col-md-12">

                <div class="panel panel-default mx-auto">

                   <div class="panel-heading text-center">

                     <span class="glyphicon glyphicon-comment"></span> Chat Room

                     <span class="pull-right glyphicon glyphicon-trash" title="Delete All Messages"             @click="truncate"></span>
                     </div>

                    <div class="panel-body">

                       <p v-for="message in messages"> {{message.user.name}} : {{message.body}}     </p>

                  </div>

                 <div class="panel-footer">

                       <input type="text" v-model="body" class="form-control" placeholder="Your     Message...">

                        <!--<span v-show="activeUser">{{activeUser.name}} is typing...</span>-->

                        <button class="btn btn-success btn-block mt-3" @click="save">Send</button>

                    </div>

                </div>

         </div>

       </div>

 </div>

</template>

<script>

    export default {

        data() {
            return {
                messages: [],
                body: '',
            }
        },
        methods :{
            truncate(){
                axios.delete('/messages').then(this.messages = []);
            },
            save(){
                axios.post('/messages',{body : this.body , user_id : app.user.id}).then(response =>     this.messages.push(response.data));
                this.body = '';
            }
        },
        computed: {
            channel() {
                return Echo.join('Messages');
            },
        },
        mounted() {
            axios.get('/messages').then(response => this.messages = response.data);

            this.channel.listen('NewMessage', (e) => {
                this.messages.push(e.message);
            });
        }
    }

</script>

and here is web.php file

Route::get('messages',function (){

   return Message::all()->load('user');

});

Route::post('messages',function (){

    $message = Message::create(request(['body','user_id']));

    NewMessage::dispatch($message->load('user'));

    return $message->load('user');
});

Route::delete('messages',function (){

    Message::truncate();

});

here is my event :

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;

        $this->dontBroadcastToCurrentUser();
    }

    public function broadcastOn()
    {
        return new PresenceChannel('Messages');
    }
}