Vue Laravel Pusher. How to leave a channel - vue.js

Question

OK this has been posted a few times and while each of the solutions seem similar, none of them work for me. So lets start with the code.
Main.vue
<template>
...
<room-tabs :selectedRoomId="currentRoom.id" :rooms="joinedRooms"
#onSelectRoom="currentRoom = $event" #onLeaveRoom="leaveRoom($event)"/>
...
</template>
methods: {
connect() {
if (this.currentRoom?.id) {
let vm = this;
this.getMessages();
Echo.join("chat." + this.currentRoom.id)
.here(users => {
this.sendUserActivityNotification(this.$page.props.user, true)
this.users = users
this.usersCount = users.length
})
.joining(user => {
this.users.push(user)
this.usersCount = this.usersCount+1
})
.leaving(user => {
this.sendUserActivityNotification(user, false)
this.users = this.users.filter(({id}) => (id !== user.id))
this.usersCount = this.usersCount-1
})
.listen('NewChatMessage', (e) => {
vm.getMessages();
});
}
},
leaveRoom({id}) {
Echo.leave("chat." + this.currentRoom.id)
this.$store.splice(RoomTypes.LEAVE_ROOM, id)
}
},
RoomTabs.vue
<template>
...
<XIcon class="float-right h-3.5 w-3.5 -mt-2 -mr-2 text-black" aria-hidden="true" #click="leaveRoom(selectedRoomId)"/>
...
</template>
<script>
import {XIcon} from '#heroicons/vue/solid'
import {types as RoomTypes} from "../../../Store/modules/rooms/rooms.types";
export default {
components: {
XIcon,
},
props: ['rooms', 'selectedRoomId'],
emits: ['onSelectRoom', 'onLeaveRoom', 'onClose'],
methods: {
leaveRoom(id) {
this.$store.splice(RoomTypes.LEAVE_ROOM, id)
this.$emit('onClose');
}
},
}
</script>
I cannot seem to disconnect from the room when I click the X on the room tab. What am I missing here?