[1019] Cannot update vuex state in nuxtServerInit after axios.get

Hi,

For some reason when I update the store in a module, it doesn't actually update/reflect after the mutation.

Can anyone see where I'm going wrong here?

store/index.js

export const state = () => ({
  authToken: null,
  apiHost: null
})

export const mutations = {
  setApiHost (state, host) {
    state.apiHost = host
  }
}

export const getters = {
  getApiUrl: (state) => (src) => {
    return state.apiHost + src
  },
  getApiImageUrl: (state, getters) => (filter, path) => {
    return getters.getApiUrl('media/cache/resolve/' + filter + '/' + path)
  }
}

export const actions = {
  nuxtServerInit ({ commit, dispatch }, { req, isDev }) {
    let apiHost = req.protocol + '://' + (isDev ? req.host + ':9000' : 'api.' + req.host) + '/'
    commit('setApiHost', apiHost)
    dispatch('nav/fetchNavItems')
  }
}

store/nav.js

import axios from 'axios'

export const state = () => ({
  loaded: false,
  menu: null
})

export const mutations = {
  setMenu (state, data) {
    state.loaded = true
    state.menu = Object.assign({}, data)
  }
}

export const actions = {
  async fetchNavItems ({ commit, rootGetters }) {
    axios.get(rootGetters.getApiUrl('menus/main'))
    .then((res) => {
      commit('setMenu', res.data)
    })
    .catch((err) => {
      console.warn({ statusCode: 404, message: 'Menu could not be loaded: ' + err })
    })
  }
}

The API call is being made and I can log within the setMenu mutation which shows the original state and the object when updated which looks fine. However, in the Vue explorer in my browser, the state keys have not updated. I don't think it's an inspector issue as my template doesn't update either, but just in case:

mainMenu.vue template extract

<template>
    ...
    <nuxt-link :to="{ name: 'index' }" :class="navClass" :active-class="activeClass" v-for="link in navMenu" :key="link.id" exact>Home</nuxt-link>
    ...
</template>
<script>
  export default {
    ...
    computed: {
      navMenu () {
        return this.$store.state.nav.menu
      },
      navMenuLinks () {
        return this.navMenu ? this.navMenu.children : this.navMenu
      }
     ...
  }
</script>

I know the link wouldn't display correctly right now but I'd expect to see a number of the same links. Would anyone be able to lend a hand?