title: Nuxt JS Vuex setting data not reflected in real-time when loading page
body: <p>In my Nuxt JS 2.9 application I'm using Vuex to save data and retrieve in my layout. I'm setting data into my Vuex store on a per page basis, it's working, but for some reason is requiring me to refresh the page of the new page to see my data otherwise it shows old data.</p>
  <p>For example, on my <strong>Homepage</strong> I'm setting:</p>
  <pre class="lang-js prettyprint-override"><code>mounted () {
    this.$store.commit('toolbar/setToolbar', {
      name: 'Homepage'
    })
  }
  </code></pre>
  <p>And on my <strong>Settings</strong> page:</p>
  <pre class="lang-js prettyprint-override"><code>mounted () {
    this.$store.commit('toolbar/setToolbar', {
      name: 'Settings'
    })
  }
  </code></pre>
  <p>this is going into my Vuex as follows:</p>
  <pre class="lang-js prettyprint-override"><code>export const state = () =&gt; ({
    toolbarData: [{
      name: 'Homepage'
    }]
  })
  
  export const mutations = {
  
    /*
     * Toolbar data
     */
    setToolbar (state, data) {
      const settings = {
        name: data.name != null ? data.name : ''
      }
  
      state.toolbarData[0] = settings
    }
  
  }
  
  </code></pre>
  <p>And when I change between the <strong>Homepage</strong> and <strong>Settings</strong> page the state is updated, but isn't reflected in real-time in my page?</p>
  <p>I've tried changing the lifecycle hook from <code>mounted</code> to <code>created</code> and <code>beforeCreate</code> in the hope that it would commit to the store and be ready before the page loads?</p>