Question: App in `created` event execute AJAX request to server to get a status. In `mounted` event App fire onLoad callback with the status to let Developer decide what to do next.

Depends on the status App should redirect user or display message. Until AJAX in progress User should see loading icon.

Here is async problem. In `created` event a request already sent and app fired `mounted`, but the request still running in background. And Developer receive default status. 

How to wait for status from backend and only after fire `mounted` event?

Answer: 
Another simple method is use `v-if`,like this:

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

```

In js:

```
data() {
    return {
        requestDone: false
    }
}

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

```

status wrap will render until `requestDone` becomes `true`.
Better approach to handle this scenario is to use `NavigationGuards` in `vue-router` . 

`beforeRouteEnter` helps to decide whether a particular component associated to the router should be loaded or it has to be navigated to another route before the component is loaded.

`beforeRouteEnter` Comes with next handler. Only when `next` is invoked, the component will be loaded. This guard is a perfect area for AJAX requests.

`next()/next(true)` - proceed with navigation. This can be used when promise is resolved

`next(false)` - navigation does not occur. 

```
 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!
  },

```

Once the route navigation is decided by `beforeRouteEnter guard` component lifecycle hooks like `created() or mounted()` can be invoked for further actions

**Reference:** <https://router.vuejs.org/en/advanced/navigation-guards.html>