Vue - refresh state on clicking back button in the browser

I am developing a login page, which lists different provider options. If you click on a provider, it will redirect to the sign-in page of the respective provider. This login component has a bool variable "pageRedirect". If pageRedirect is true, the component displays "Redirecting...", otherwise it displays the list of providers.

<template>
    <div v-if="pageRedirect">
      <h1>Redirecting...</h1>
    </div>
    <div v-else>
     <!-- list of providers -->
    </div>
</template>

If you click on a provider, the pageRedirect value will be set true and there is an axios call that goes to backend. The redirect happens in the go backend using http.Redirect(). In the mean time, the method that sets the pageRedirect completes. So when I hit the back button in the browser from the redirected page, it returns to the login page which displays "Redirecting..." and does not display the list of providers. This is because the pageRedirect value is still true.

axios
   .post("/redirectUrl", body, nil)
     .then(function (response)
      {
              this.pageRedirect = true;
              window.location.href = response.headers.location;
              // if I add this.pageRedirect=false here, it shows "Redirecting...", but doesnt
              // doesnt redirect itself
      }).
     .catch(function (response) {
            //display error
     }); 

If I try to set the pageRedirect to false in the same method, it is not redirecting itself, it remains on the same page. So I need some solution like vue-watchers or something to set this pageRedirect value to false on hitting back button in the browser from the redirected page.

Thanks in Advance

I fixed it by using document visibilityState.

document.addEventListener("visibilitychange", () => {
       this.pageRedirect=false;
});

Thanks @yoduh and @Jose Fernández for your valuable comments