Laravel echo events render issue

Hey guys , I'm trying to display event coming from pusher in my vuejs app so I just added this following code in one of my components

 mounted() {

        var channel = Echo.channel('Post');
        channel.listen('event', function()  {
            alert('hi');
        });


    },

when I refresh the page and check pusher debuger I can see Channel Post occupied.. I send data from there but nothing displays ! no errors in console..

This is my event

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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

   public $post;

   
   
    public function __construct($post)
    {
         $this->post=$post;
    }

    public function broadcastOn()
    {
        return new Channel('Post');
    }

    public function broadcastAs()
    {
        return 'event';
    }
}

Added the code below in bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: mykey,
    cluster: 'eu',
    encrypted: true
});

in my env file I changed broadcast=> pusher

couldn't figure out what's wrong here...