Layout doesn't change when using navigateTo in the nuxt middleware

<script setup>
    definePageMeta({
        middleware: ["require-unauth"],
        layout: "auth",
    });
</script>

<template>
    <div class="relative min-h-[100dvh]">
        <!-- start of bg of the auth pages -->
        <div class="absolute h-full w-full">
            <img src="/imgs/auth-bg.jpg" class="w-full h-full object-cover" />
            <div class="w-full h-full absolute bg-FrameOne/30 inset-0"></div>
            <img
                src="/imgs/logo.png"
                class="absolute top-2 left-2 w-[15%] object-cover aspect-square"
            />
        </div>
        <!-- end of bg of the auth pages -->
        <slot />
    </div>
</template>