Vuejs 3 Stuck at loading page - vue.js

Question

Hello I have a problem showing/loading page. Some routes are working, and those routes that work are calling API for data, the ones that not work are not calling API for data.
So I am calling API for data(I don't have to, and I don't want to), and then the page loads.
I am watching the selected language computed:{lang(){...}} because in some situations I need to get translated data from API.
Here is the code with added API call.
asyncDataStatus.js
export default{
data(){
return{
asyncDataStatus_ready: false
}
},
methods: {
asyncDataStatus_fetched(){
this.asyncDataStatus_ready = true
this.$emit('ready')
}
},
}
App.vue
<template>
<router-view v-show="showPage" #ready="onPageReady" />
</template>
<script>
export default {
import asyncDataStatus from '#/mixins/asyncDataStatus'
export default {
methods:{
onPageReady(){
this.showPage = true
NProgress.done()
}
},
mixins: [asyncDataStatus],
created(){
NProgress.configure({
speed: 200,
spinner: false
})
this.$router.beforeEach(() => {
this.showPage = false
NProgress.start()
})
}
}
</script>
Contact.vue
<template>
<router-view v-show="showPage" #ready="onPageReady" />
</template>
<script>
import store from '../store';
import asyncDataStatus from '#/mixins/asyncDataStatus'
export default {
mixins: [asyncDataStatus],
computed: {
lang() {
return this.$i18n.locale
},
watch: {
async lang(newLang, oldLang) {
if(newLang !== oldLang) {
// If I remove this line `store.dispatch` line (which is not needed in this file), then `this.asyncDataStatus_fetched()` won't happen
await store.dispatch('impressionModule/getImpressions')
this.asyncDataStatus_fetched()
}
},
created() {
this.asyncDataStatus_fetched()
}
}
}
</script>