How to implement loginRedirect using vuejs and azureb2c and msal.js

I'm trying to implement an SSO using Azure b2c and Vuejs and MSAL, but I'm getting some issues.

msalConfig: {
      auth: {
        clientId: "******dd03",
        authority:"https://*****",
        knownAuthorities: [
          "******hb2cdev.onmicrosoft.com",
        ],
        redirectUri:'localhost:8080/#/main'
      },
      cache: {
       cacheLocation: "localStorage",
      },
     },
    accessToken: ""

component configuration :

    async created() {
     this.$msalInstance = new PublicClientApplication(
     this.authStore.$state.msalConfig
     );
   },

mounted() {
 console.log("msqlInstance :", this.$msalInstance);
 const accounts = this.$msalInstance.getAllAccounts();
 if (accounts.length == 0) {
  console.log("empty");
  return;
 }
 this.account = accounts[0];
 console.log("test :", this.account);
 this.$emitter.emit("login", this.account);
},

methods: {
  async SignIn() {
    console.log("test");
    await this.$msalInstance
    .loginPopup({})
    .then((res) => {
      const myAccounts = this.$msalInstance.getAllAccounts();
      this.account = myAccounts[0];
      this.$emitter.emit("login", this.account);
    })
    .catch((error) => {
      console.error(`error during authentication: ${error}`);
    });
},
async SignOut() {
  await this.$msalInstance
    .logout({})
    .then((res) => {
      this.$emitter.emit("logout", "logging out");
    })
    .catch((error) => {
      console.error(error);
    });
},
},

this code is working as expected but when I replace .loginPopup({}) on the Sign in method by loginRedirect to avoid having the popup I'm getting this error :

UserAuth.vue?212c:67 error during authentication: BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.