// /lobby
<template>
    <div v-if="isInRoom">
        Lobby stuff
    </div>
    <div v-else>
        Here is the "Trete einem Raum bei"
    </div>
    <FooterComponent />
</template>

<script lang="ts">
export default {
    name: 'LobbyPage',
    setup(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            userStore: useUserStore(),
            toast: useToast(),
        };
    },
    data(): any {
        return {
            ...
        };
    },
    beforeMount(): void {
This here is the part where everyone gets redirected to /game        
globalThis.socket.on(CLIENT_EVENTS.startGameBroadcast, () => {
            this.$router.push({
                path: '/game',
            });
        });
    },
};
</script>

// /lobby
<template>
    <div v-if="isInRoom">
        Lobby stuff
    </div>
    <div v-else>
        Here is the "Trete einem Raum bei"
    </div>
    <FooterComponent />
</template>

<script lang="ts">
export default {
    name: 'LobbyPage',
    setup(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            userStore: useUserStore(),
            toast: useToast(),
        };
    },
    data(): any {
        return {
            ...
        };
    },
    beforeMount(): void {
This here is the part where everyone gets redirected to /game        
globalThis.socket.on(CLIENT_EVENTS.startGameBroadcast, () => {
            this.$router.push({
                path: '/game',
            });
        });
    },
};
</script>

// /game
<template>
    <div
        v-show="loaded"
        class="text-center top-50 start-50 translate-middle"
        :class="{ 'position-absolute': loaded }"
    >
        game stuff
    </div>
</template>

<script lang="ts">

export default {
    name: 'GamePage',
    setup(): any {
        return {
            userStore: useUserStore(),
        };
    },
    data(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            ...
        };
    },
    beforeMount(): void {
....
    },
...
};
</script>

// /game
<template>
    <div
        v-show="loaded"
        class="text-center top-50 start-50 translate-middle"
        :class="{ 'position-absolute': loaded }"
    >
        game stuff
    </div>
</template>

<script lang="ts">

export default {
    name: 'GamePage',
    setup(): any {
        return {
            userStore: useUserStore(),
        };
    },
    data(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            ...
        };
    },
    beforeMount(): void {
....
    },
...
};
</script>