vue async call in created() lifecycle hook - vue.js

Question

I need to call below method in created(). For this purpose, I need to make created() as async. Per Vue documentation, created() is called synchronously. Will Vue Framework await on created() to avoid any race conditions?
this.isAuthenticated = await authService.isAuthenticated();

Answer 1

Vue.config.productionTip = false;
function tm(ms, msg) {
return new Promise(resolve => {
setTimeout(() => {
resolve(msg);
}, ms);
});
}
new Vue({
async beforeCreate() {
console.log(await tm(1000, "BEFORE CREATE"));
},
async created() {
console.log(await tm(2000, "CREATED"));
},
async beforeMount() {
console.log(await tm(3000, "BEFORE MOUNT"));
},
async mounted() {
console.log(await tm(4000, "MOUNTED"));
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

If you really need to wait until your asynchronous function is done. You can basically await it before you create the Vue instance. This may not be always useable, but in a case like in this question it is, and it is more solid than putting an asynchronous lifecycle hook that isn't awaited.
Vue.config.productionTip = false;
// mock service
const authService = {
isAuthenticated: () => new Promise((r) => setTimeout(() => r(true), 2000))
};
// async iife to await the promise before creating the instance
(async() => {
const isAuthenticated = await authService.isAuthenticated();
new Vue({
data: {
isAuthenticated
},
created() {
console.log('authenticaed:', this.isAuthenticated);
},
})
})().catch(console.warn);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>