First of all you should not block rendering until some asynchronous operation complete. Basically the async call to a function decorated with "await" is required to let the UI thread to do its job. Instead of blocking rendering you should display some useful information for the user, at least some message that describes the process being performed: "Authorizing..." or something like this.

To resolve you problem you can declare some boolean variable in your component (or in your vuex store) that is set to false until user is authorized. By checking this value in your html template you can prevent showing page content until browser is redirected to auth page.

data() {
  return {
    isAuthorized: false;
  }
}

// your code
if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
} else {
  this.isAuthorized = true;
}

// process user information

The 'await this.$auth.loginWith("auth0");' is causing the breif moment of delay. This is the time required to verify if the current session is active. This can be handled by adding something like a loading page.

showLoadingPage(); // display a fullscreen loading animation or text
if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
}
hideLoadingPage(); // hide the loading animation after the await completes

const user = this.$auth.user;
// Operations using user information below //