I have a component in which the values are updated from computed properties. I have added a nuxtServerInit plugin to make a fetch call on nuxt app creation and update values. But somehow the fetch promise is resolved after the computed properties is run and the store values at this time is always empty. How can i make sure that my computed properties are updated only after the promise is resolved. Below are the files created:

component.vue

<template>
  <select>
   <div v-for="(data, index) in dataList" :key="index">
    <option :value="data.value">{{ data.label }}</option>
   </div>
  </select>
</template>

<script>
 import { allDataStore } from '@/store/allDataStore.js'

 export default {
  setup(){
   const reqData = allDataStore()

   return {
    reqData
   }
  },
  computed: {
   dataList() {
    console.log('inside computed dataList')
    return this.reqData
   },
  }
 }
</script>

nuxtServerInit.js

import { allDataStore } from '@/store/allDataStore.js'
export default defineNuxtPlugin((nuxtApp) => {
 nuxtApp.hook('app:created', async () => {
    console.log('inside nuxtApp hook')
    const dataFetch = allDataStore()
    await dataFetch.fetchAllData()
 })
})

allDataStore.js

import { defineStore } from 'pinia'
export const masterDataStore = defineStore('masterDataStore', {
 state: () => ({
  allData: {}
 }),
 getters: {
  getReqData: state => state.allData,
 },
 actions: {
  fetchAllData (){
    console.log('inside fetchAllData call')
    const newData = $fetch('url').then(res) => {
    console.log('data received')
     return res[0]
    }
  }
 }
}

Currently the code is running in following order: 'inside nuxtApp hook' -> 'inside fetchAllData call' -> 'inside computed dataList' -> console.log('data received')

But the following order is needed: 'inside nuxtApp hook' -> 'inside fetchAllData call' -> console.log('data received') -> 'inside computed dataList'