title: Nuxt fetch data with vuex action but return undefined in store getters
body: <p>I am facing a problem with my fetch with actions of store returning undefined</p>
  <p>component.js</p>
  <pre><code>export default: {
  ...
  async fetch({ store, route }) {
      await store.dispatch('calendar/getDetailSportingEvents', {
        type: route.params.context,
        id: route.params.id
      })
    },
  computed: {
    ...mapGetters({
      data: 'calendar/getData' //loads in server side but on client it returns {}
    })
   }
  ...
  }
  </code></pre>
  <p>store/calendar.js</p>
  <pre><code>const state = () = ({
   data: {}
  })
  
  const getters = {
   getData(state) {
    return state.data
   }
  }
  
  const mutations = {
   updateData(state,payload) {
    state.data = payload
   }
  }
  
  const actions = {
    async getDetailSportingEvents(context, {type, id}) {
        try {
          const data = await this.$axios
            .$get(`apiUrlString`)
            await context.commit('setCalendarEvent', data)
        } catch (err) {
        }
      }
  }
  
  export default { state, getters, mutations, actions }
  </code></pre>
  <p>It manages to call on server side as I can see the logs that the data is being passed through and there is a render of the content. However after a second when the app is fully loaded, it just disappears cause the mapGetters from returning payload data to just default which is {} which I have a <code>v-if</code> to check if the return value is <code>null</code> or empty <code>Object</code></p>
  <p>The reason why I have it set up like so, because I have a refresh button that will call <code>this.$fetch()</code> method for the latest data</p>
  <p>Any help will be appreciated</p>