Cómo retrasar el evento montado

Otro método simple es usar v-if, así:

<div class="status" v-if="requestDone">status</div>
<div class="loading" v-else>loading</div>

En js:

data() {
    return {
        requestDone: false
    }
}

created() {
    promise.then(() => {
        ...
        this.requestDone = true
    })
}

El ajuste de estado se procesará hasta que requestDone se convierta en true.

Un mejor enfoque para manejar este escenario es usar NavigationGuards en vue-router.

beforeRouteEnter ayuda a decidir si se debe cargar un componente particular asociado al enrutador o si se debe navegar a otra ruta antes de cargar el componente.

beforeRouteEnter Viene con el siguiente controlador. Solo cuando se invoca next, el componente se cargará. Este protector es un área perfecta para solicitudes AJAX.

next()/next(true) - continúa con la navegación. Esto se puede usar cuando se resuelve la promesa

next(false) - la navegación no ocurre.

 beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },

Una vez que la navegación de ruta es decidida por beforeRouteEnter guard, se pueden invocar ganchos de ciclo de vida de componentes como created() or mounted() para acciones adicionales

Referencia: https://router.vuejs.org /en/advanced/navigation-guards.html