Vue trigger mounted before async created completed - vue.js

Question

VueJS fires mounted before async created done.
The base html is rendered by SSR (Laravel/PHP) for SEO and users. So, it is desirable to complete this.fetchCakeShops() and variable this.cakeShops is filled before mount id="cake-shop-list" to virtual DOM. (Otherwise, the screen become blank until this.cakeShops is set) Therefore I wrote code like bellow.
<!-- Base html -->
<div id="cake-shop-list">
<!-- Already server side rendered cake shops list -->
<ul><li>shopA</li><li>shopB</li></lu>
</div>
<template>
<div>
<ul>
<li v-for="shop in cakeShops" :key="shop.id" :click="onClickShop(shop.id)">{{shop.name}}</li>
</ul>
</div>
</template>
<script>
export default {
...
async created() {
console.log("created start!")
this.cakeShops = await this.fetchCakeShops({page: 1})
console.log("created ends!", this.cakeShops)
},
mounted() {
console.log("mounted!")
},
methods: {
...
}
}
</script>
I wish mounted hook starts after created. But the log console shows like bellow, and the DOM is override with blank virtual DOM in a few seconds.
created start!
mounted! <- Oops
created ends!
Array(10)[{id: 1, name: 'shopA'},{id: 2, 'shopB'}...]
Is there any solution to wait mount until async is complete?
note: I can not pass shops array to props.

Answer 1

The mounted method will not wait untill the created method is done (event if its async) instead what you could do is create a different function and call this at the end of your create function
this will look something like this:
async created() {
this.cakeShops = await this.fetchCakeShops({page: 1})
this.loaded();
},
methods: {
loaded: {
//code here
},
}