Real-time communication using reverb on Laravel backend and Vue 3 cli frontend

I am trying to implement real-time communication using reverb on my Laravel v12 backend and @laravel/echo package in my vue 3 cli app frontend. I have setup the following environment variables in laravel as follows:

REVERB_APP_ID=946267
REVERB_APP_KEY=4g7tscrfjytjr6izdriw
REVERB_APP_SECRET=e9r1lpxy9njapz53w1rd
REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http

This is the public channel definition

Broadcast::channel('testChan', fn() => true);

This is the event created

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

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('testChan'),
        ];
    }

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

This is the code base in the main.ts file client-side in vue 3 v3.17.7

import { configureEcho } from '@laravel/echo-vue'

configureEcho({
  broadcaster: 'reverb',
  key: import.meta.env.VITE_REVERB_APP_KEY,
  wsHost: import.meta.env.VITE_REVERB_HOST,
  wsPort: import.meta.env.VITE_REVERB_PORT,
  forceTLS: false,
  enabledTransports: ['ws', 'wss'],
  disableStats: true,
  scheme: 'http',
  authEndpoint: 'http://localhost:8000/api/broadcasting/auth',
  auth: {
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
    },
  },
})

This is the event listening in a component

import { useEchoPublic } from '@laravel/echo-vue'

const { listen, stopListening, channel } = useEchoPublic('testChan', 'ReverbTest', (e) =>
  console.log('Reverb socket response: ', e),
)

onMounted(() => {
  listen() // Start listening when component mounts
  console.log('listening: ', channel())
})

onUnmounted(() => {
  stopListening() // Clean up when component unmounts
})

I have created an API to fire the event server-side which you can find below

Route::post('test/reverb', fn() => event(new ReverbTestEvent('Hello public channel!')));

When i fire this api and inspect my browser client-side, i find the diffused event in the network tab

channel : "testChan"
data : "{\"message\":\"Hello public channel!\"}"
event : "ReverbTest"

But the event listener in my component does not react to the event received by printing this event to the console. What might be the issue and how can i solve it. Please keep in mind i am using a public channel in this use case