Display push notifications

This is my first-time using push notifications and it seems that I have everything working so far, except for actually displaying the notifications. In my Network Tab if I select WS I can see the following: https://ibb.co/Ny17SHT

My question is how do I now take that and show the notifications in a dropdown or something. I read some articles but it seems like everyone does it different so I'm unsure how to do it.

I have this is my Layout.vue file in the mounted for the moment, but nothing ever happens with this, I never see a message or anything in the console or anywhere

Echo.private('App.Models.Tenant.User.' + this.$page.props.auth.id)
            .notification((notification) => {
                console.log(notification);
            });

I'm desperate at this point since this doesn't work. I'm not sure even what's supposed to happen when I do get a notification, the docs are super vague when it comes to listening on the frontend. When sending a notification on the backend is that area in the image with the messages supposed to change? If it does than what is it supposed to display, I don't see there anything that actually has to do with my Notification (what is supposedly bring returned in the toArray method in the Notification class).

//messages in console

{"event":"pusher:connection_established","data":"{\"socket_id\":\"444794.19982985\",\"activity_timeout\":120}"}	111	
14:50:46.387
{"event":"pusher:subscribe","data":{"auth":"8ae61a544f2b833a76fc:e4fcb3c8bc1b9efe1f6d12fc67e0f8c65015bcc91c966f6601ae7447cedc1901","channel":"private-App.Models.Tenant.User.1"}}	177	
14:50:47.279
{"event":"pusher_internal:subscription_succeeded","data":"{}","channel":"private-App.Models.Tenant.User.1"}	107	
14:50:47.360
{"event":"pusher:ping","data":{}}	33	
14:52:47.497
{"event":"pusher:pong","data":"{}"}

It keeps doing like those last two, empty. Even when I'm actively creating a Notification on the back nothing happens or changes.