ローディングコンポーネント呼び出せない

pages/UserDetail.vue

    asyncData: async function(context) {
        context.store.commit("loading/setLoading", true)
        let clickedFileUserId = ''
        // 配列でclickedFileUserId取得
        context.store.getters['musicFiles/musicFileData'].forEach(musicFiledatum => {
            clickedFileUserId = musicFiledatum.clickedFileUserId
        });
        await context.store.dispatch('musicFiles/userDetailPageData', {
            clickedFileUserId: clickedFileUserId,
        })
        context.store.commit("loading/setLoading", false)
    },

async awaitの記載がstore側なかった
store/musicFiles.js

  // ユーザー詳細画面api取得
  userDetailPageData(context, payload) {
    let UserDetailItems = []
    this.$axios.$get(`api/${payload.clickedFileUserId}/userDetailPageData`)
      .then(response => {
        UserDetailItems = response
        console.log(response)
        context.commit('setUserDetailPageData', UserDetailItems)
      })
    },

修正↓

  // ユーザー詳細画面api取得
  async userDetailPageData(context, payload) {
    let UserDetailItems = []
    await this.$axios.$get(`api/${payload.clickedFileUserId}/userDetailPageData`)
      .then(response => {
        UserDetailItems = response
        console.log(response)
        context.commit('setUserDetailPageData', UserDetailItems)
      })
    },