title: vue mapGetters not getting on time
body: <p>I'm using vuex to manage the state in my application and doing one way binding with my form.</p>
  
  <pre><code>&lt;script&gt;
    import { mapGetters } from 'vuex'
    import store from 'vuex-store'
  
    import DataWidget from '../../../../uiComponents/widget'
    export default {
      data () {
        return {
          isEdit: false,
          msg: {
            id: 0,
            content: '',
            isEnabled: false
          }
        }
      },
      components: {
        DataWidget
      },
      computed: mapGetters({
        messageId: 'messageId',
        messageContent: 'messageContent',
        isMessageEnabled: 'isMessageEnabled',
        isMessageValid: 'isMessageValid'
      }),
      methods: {
        onSave () {
          store.dispatch('saveMessage', this.msg, { root: true })
          if (this.isMessageValid) {
            this.isEdit = !this.isEdit
          }
        }
      },
      created () {
        this.msg.id = this.messageId
        this.msg.content = this.messageContent
        this.msg.isEnabled = this.isMessageEnabled
      }
  
    }
  &lt;/script&gt;
  
  &lt;b-form-textarea id="content" v-model="msg.content" :rows="3" required aria-required="true" maxlength="250"&gt;&lt;/b-form-textarea&gt;
  </code></pre>
  
  <p>On load, the values on created() are not binded until I perform an action on the page or refresh the page. </p>
  
  <p>I have tried mounted () hooked same thing.</p>
  
  <p>My Vuex store (Message Module) looks like this:</p>
  
  <pre><code>const state = {
    messageId: 0,
    messageContent: '',
    isMessageEnabled: false,
    isMessageValid: true
  }
  
  const getters = {
    messageId: state =&gt; state.messageId,
    messageContent: state =&gt; state.messageContent,
    isMessageEnabled: state =&gt; state.isMessageEnabled,
    isMessageValid: state =&gt; state.isMessageValid
  }
  
  const actions = {
    getMessage ({commit, rootGetters}) {
      api.fetch('api/Preference/Message', rootGetters.token)
      .then((data) =&gt; {
        commit(types.MESSAGE_LOAD, data)
      })
    }
  }
  
  const mutations = {
    [types.MESSAGE_LOAD] (state, payload) {
      state.messageId = payload ? payload.id : 0
      state.messageContent = payload ? payload.content : ''
      state.isMessageEnabled = payload ? payload.enabled : false
    }
  }
  
  export default {
    state,
    getters,
    actions,
    mutations
  }
  </code></pre>
  
  <p>and I have a global action (action.js) the gets multiple data:</p>
  
  <pre><code>export const loadSetting = ({ commit, rootGetters }) =&gt; {
    api.fetchAsync('api/Preference/all', rootGetters.token)
    .then((data) =&gt; {
      commit(types.MESSAGE_LOAD, data.message)
      commit(types.HELPDESK_LOAD, data.helpDesk)
      commit(types.VOLUME_LOAD, data.volumes)
      commit(types.DOWNLOAD_LOAD, data.downloadService)
    })
  }
  </code></pre>
  
  <p>My api call:</p>
  
  <pre><code>  async fetchAsync (url, token = '') {
      let data = await axios.get(HOST + url, {
        headers: {
          'Authorization': 'bearer ' + token
        }
      })
      return data
    }
  </code></pre>