How to set authentications headers with Vue apollo and composition api?

Question

I've build my app with Vite. I read many documents on web about the topic but I'm still very confused. I've a login form that send credentials to a protected view. When post the data I set the headers and store the Bearer token in the local storage. The problem is that it doesn't work cause the Bearer token result equal to null. Only when I logout the token is set in the headers.

That's how is the header when I log in

And here how it's set when I log out...

My main.js code is this:

import { createApp, provide, h } from "vue";
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
} from "@apollo/client/core";
import { DefaultApolloClient } from "@vue/apollo-composable";

import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

import { provideApolloClient } from "@vue/apollo-composable";

const authToken = localStorage.getItem("auth-token");

const httpLink = createHttpLink({
  uri: "http://localhost/graphql",
  headers: {
    Authorization: "Bearer " + authToken,
  },
});

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

provideApolloClient(apolloClient);

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },

  render: () => h(App),
});

app
  .use(router)
  .use(createPinia())
  .mount("#app");

and this is my routes.js

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {

    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

    const isAuthenticated = localStorage.getItem('auth-token');

    if(requiresAuth && isAuthenticated===null){
      next('/auth/login');
    }else {
      next();
    }

});

I'm surely making some mistakes in my main.js but I cannot understand what's wrong. I'm very confused :-/ Thanks to who'll be able to help me.