Why i can access dahsboard even when my login fail?

I’m having trouble with authentication where I have a Laravel backend and a Nuxt frontend. When I log in and log out successfully, everything works fine. The problem occurs when the login fails due to incorrect credentials, yet I’m still able to access the dashboard. Even though the login fails, I can see a new XSRF token being added in the browser’s Application tab. The issue is that I can access the dashboard and even the profile section, but when I try to log out, I get an error saying I’m unauthorized, which makes sense because the token wasn’t provided. However, for some reason, a session with the XSRF token is hanging around, causing me to be partially logged in even though I’ve entered incorrect login credentials. Does anyone know what could be causing this issue? I’m new to REST APIs, so I’m probably doing something very wrong.
This is my useAuth.js

export default function useAuth() {
    const user = useState('auth-user', () => null)

    const { errorBag, transformValidationErrors, resetErrorBag } = useCustomError()

    const { api, csrf } = useAxios()

    async function me() {
        try {
            const data = await api.get("/api/me")
            user.value = data.data
        } catch (e) {
            user.value = null
            console.log("error")
        }
    }

    function login(userForm) {
        resetErrorBag()
        csrf().then(() => {
            api.post("/login", userForm).then(({ data }) => {

                user.value = data.user

                $fetch('/api/set-cookie', {
                    method: "POST",
                    body: { token: data.token }
                }).then(res => {
                    navigateTo("/dashboard")
                })
            }).catch(err => {
                transformValidationErrors(err.response)
            })
        })
    }


    function logout() {
        api.post("/api/logout").then(() => {
            user.value = null
            $fetch('/api/logout', {
                method: "POST",
            }).then(res => {
                navigateTo("/")
            })

        })
    }

    function register(userForm) {

        resetErrorBag()
        csrf().then(() => {
            api.post("/register", userForm).then(({ data }) => {
                //   verify email screen
            }).catch(err => {
                transformValidationErrors(err.response)
            })
        })
    }


    return { login, logout, register, errorBag, user, me }

}

this is my useAxios.js

import axios from "axios";

export default function useAxios(){

    const rtConfig = useRuntimeConfig()
    let api = axios.create({
        baseURL: rtConfig.public.API_URL,
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            // "Authorization:": "Bearer " + localStorage.getItem("token"),
        },
        withCredentials: true,
        withXSRFToken: true
    })



    async function csrf(){
        return await api.get("/sanctum/csrf-cookie")
    }

    return {
        api, csrf
    }
}

guest middleware

export default defineNuxtRouteMiddleware((to, from) => {


    const key = process.server ? 'token' : 'XSRF-TOKEN'

    const token = useCookie(key)


    if(token.value)
        return navigateTo('/')


  })
  

auth middlware

export default defineNuxtRouteMiddleware((to, from) => {


    const key = process.server ? 'token' : 'XSRF-TOKEN'

    const token = useCookie(key)


    if(!token.value)
        return navigateTo('/')



  })

So even when I defined auth middleware for dashboard page lije this

definePageMeta({
    middleware: ['auth']
  })

I can still access it, but at all I’m not authorized. I don’t understand where is mistake :/