why do I have to refresh after logging in to see my user name?

here is my login method form my login form:

const login = () => {
  if (!email.value || !password.value) {
    alert("Please fill all the field");
  } else {
    const data = {
      email: email.value,
      password: password.value,
    };
    auth.userLogin(data);
    router.push("/");
  }
};

here is my pinia action to login:

async userLogin(data) {
      this.isloading = true;

      const res = await fetch("http://127.0.0.1:8000/api/login/", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const output = await res.json();
      console.log("Output: ", output.authorisation.token);
      if (output.status === "success") {
        localStorage.setItem("token", output.authorisation.token);
        this.token = output.authorisation.token;
        alert(output.status);
        this.isloading = false;
        this.$route.push("/");
      } else {
        this.isloading = false;

        alert(output.message);
      }
    },

Great, all good, setting the localStorage Token and getting success....

when I get redirected to / the getUser state action is triggered:

top of my index.vue page

import { useAuth } from "@/store";
const auth = useAuth();
auth.getUser();

and here is my getUser method:

async getUser() {
      this.isloading = true;
      console.log("Local storage: ", localStorage.getItem("token"));
      const res = await fetch("http://localhost:8000/api/user", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      const output = await res.json();
      console.log("Name: ", output.name);
      this.isloading = false;
      this.user = output;
    },

It only says Welcome Mr Tester after I refresh the page again?!