vue.js - async/await アクションからの動的プロパティ名でオブジェクトを更新する Vuex ミューテーション

Question

そこで、Nuxt にサイト メニューの GQL API をクエリさせようとしています。これは、ストア モジュールのnuxtServerInit関数を介して行っています。index.js

そのようです：

menuLocations = ["MAIN_MENU", "WORK_MENU"]
store.dispatch("menus/QUERY_MENUS", menuLocations)

私のストアモジュールQUERY_MENUSから私のアクションを呼び出します。menus.jsそのためのコードは次のとおりです。

// Define State defaults
export const state = () => ({
    locations: {}
})

// Define mutations
export const mutations = {
    SET_MENU(state, data) {
        //Vue.set(state.locations, data.location, data.items)
        //state.locations = { ...state.locations, [data.location]: data.items }
    }
}

// Define actions
export const actions = {
    async QUERY_MENUS({ commit }, menuLocations) {
        let client = this.app.apolloProvider.defaultClient

        // Get each menu from server
        for (const location of menuLocations) {
            const query = await client.query({
                query: MenuByLocation,
                variables: {
                    location: location
                }
            })

            // Commit menu to store
            commit("SET_MENU", {
                location: _camelCase(location),
                items: _get(query, "data.menuItems.nodes", {})
            })
        }
    }
}

問題は、コメントアウトされた行がSET_MENU確実に機能しないことです (コメントを外した場合)。機能する場合もあれば、機能しない場合もあります。Nuxt と SSR に関係していると思いますか、それとも async/await の処理が間違っているのでしょうか?

コードサンドボックスはこちら:

コード: https://codesandbox.io/s/j3yjz2wm6y?fontsize=14

プレビュー: https://j3yjz2wm6y.sse.codesandbox.io/

助言がありますか？ありがとう！