I'm Using Local Storage to save a token and when I logout and login with different account it uses the last account credential till refresh

here is my code I use Vue 3 and pinia my store is and after login, I save the token in local storage, and on logout I remove the item but the problem is the remove action didn't work till I refresh the page or till some minute

 actions: {
    async login(token, userId, currentUser) {
      this.currentUser = currentUser;
      window.localStorage.setItem("token", token);
    },
    async logout() {
      localStorage.clear();
      sessionStorage.clear();
      this.isLoggedIn = false;
      this.router.push({ name: "signin" });
    
      apolloClient.cache.data.clear();
    },
    async addFoods(...foods) {
      this.foods = foods;
    },
  },
  persist: {
    enabled: true,
  },

and my apollo request header is

const token = window.localStorage.getItem("token");
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      ...((token && { authorization: `Bearer ${token}` }) || ""),
    },
  };
});

export const apolloClient = new ApolloClient({
  cache,
  link: authLink.concat(httpLink),
});