Error: Login required when call getAccessTokenSilently in onMounted

Help
,
1

I am facing a weird issue with getAccessTokenSilently.

When it is called from VueJS onMounted it fails with the error “Uncaught (in promise) Error: Login required”
But when I call it on button click it works fine. What am I doing wrong?

The not working code :
async function callUserInfo(){
  const accessToken = await getAccessTokenSilently();
  const url = "/api/v1/private/userinfo";
  const requestOptions = { method: "GET", headers: { "Content-Type": "application/json", Authorization: 'Bearer ' + accessToken }};
  fetch(url, requestOptions)
        .then(response => response.json())
        .then(data => 
        { 
          console.log(data);
          if(data.status === "OK")
          {
          }
        });
}

onMounted(() => 
{

  if(isAuthenticated)
  {
    callUserInfo();
  }
  
});

And the working code :

<button @click="create_corner">Create</button>
...
async function create_corner(){
      const accessToken = await getAccessTokenSilently();
      const url = "/api/v1/private/subcorner";
      const requestOptions = { method: "POST", headers: { "Content-Type": "application/json", Authorization: 'Bearer ' + accessToken },
                               body: JSON.stringify({ subcorner_name: new_subcorner_data.value })
                             };
      fetch(url, requestOptions)
        .then(response => response.json())
        .then(data => 
        { 
          console.log(data);
          if(data.status === "OK")
          {
            is_create_subcorner_visible.value = false;
          }
        });
    }