Why nuxt doesnt keep auth state for user?

Hi, I'm building an application where I have a Laravel backend API and a Nuxt frontend. Authorization works pretty much fine, but I have an issue where, after a user logs in, I can see the Laravel session, the XSRF token, and the token I create on the backend in the client storage. Everything works fine until I refresh the page while being an authorized user on the dashboard. When I refresh the page, it redirects me back to the login page, and even though the token, XSRF token, and Laravel session remain the same in the app storage, it still doesn't redirect me back to the dashboard. It behaves as if the user is not logged in. Does anyone have any idea why this is happening? I'm new to this and don't quite understand it fully, and now I'm stuck.

This is 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
    }
}

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 => {
                user.value = null;
                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)
            })
        })
    }

    function forgotPassword(userForm){
        resetErrorBag()
        
        csrf().then(() => {

            api.post('/forgot-password', userForm).then(({data}) => {
                alert("Odkaz na obnovení hesla byl úspěšně odeslán na váš email.");
            }).catch(err => {
                transformValidationErrors(err.response)
            })
        })

    }

    function resetPassword(userForm){
        resetErrorBag()
            api.post('/reset-password', userForm).then(res => {
                console.log(res);
                navigateTo("/")
            }).catch(err => {
                transformValidationErrors(err.response)
            })
    }

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

}

This is auth middleware

export default defineNuxtRouteMiddleware(async (to, from) => {
    const { me } = useAuth(); 
    const user = useState('auth-user');

    if (!user.value) {
        try {
            await me(); 
        } catch (e) {
            return navigateTo('/'); 
        }
    }

    if (!user.value) {
        return navigateTo('/');
    }
});

This is guest middleware

export default defineNuxtRouteMiddleware(async (to, from) => {
    const { me } = useAuth(); 
    const user = useState('auth-user');

    if (user.value) {
        try {
            await me(); 
        } catch (e) {
            return navigateTo('/dashboard'); 
        }
    }

    if (user.value) {
        return navigateTo('/dashboard');
    }
  });
  

This is my backend logic for login

   public function store(LoginRequest $request): JsonResponse
    {
        $request->authenticate();

        $request->session()->regenerate();

        /**
         * @var \App\Models\User $user
         */

        $user = Auth::user();
        return response()->json([
            'user' => $user,
            'token' => $user->createToken($request->email)->plainTextToken
        ]);
    }