title: Vuex- Page is not updating after commit changes made to state
body: <p>I am trying to make a simple project which has 2 Vue pages add.vue and read.vue. If we add a message in add.vue(using commit to mutate teh state), results should be displayed in read.vue , using Vuex store. (I am using Nuxt)</p>
  <p>store/index.js file=&gt;</p>
  <pre><code>export const state = () =&gt; ({
    messages:[]
  }) 
  export const mutations={
     addMessage:(state, comment)=&gt; {
      state.messages.push(comment)
    }
  }
  </code></pre>
  <p>add.vue file</p>
  <pre><code>
  &lt;template&gt;
    &lt;div class=&quot;addContainer&quot;&gt;
     &lt;b-form @submit.prevent=&quot;handleSubmit&quot;&gt;
  
        &lt;b-form-group id=&quot;input-group-2&quot; label=&quot;Comment:&quot; label-for=&quot;input-2&quot;&gt;
          &lt;b-form-input
            id=&quot;input-2&quot;
            v-model=&quot;comment&quot;
            required
            placeholder=&quot;Enter Your Comment&quot;
          &gt;&lt;/b-form-input&gt;
        &lt;/b-form-group&gt;
          &lt;b-button type=&quot;submit&quot; variant=&quot;primary&quot;&gt;Submit&lt;/b-button&gt;
      &lt;/b-form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from '~/components/Header'
  import {mapActions} from 'vuex'
  import {mapState} from 'vuex'
  export default {
  data() {
              return {
           comment:''
              }
        },
          computed:{
              ...mapState([
                'messages'     
              ])
          },
          methods:{
          handleSubmit(){
           this.$store.commit('addMessage', this.comment)
                  console.log('Messages is '+this.messages )
            this.comment = ''
          }
        },
        components:{
              Header
        }
      }
      &lt;/script&gt;
  </code></pre>
  <hr />
  <h2>read.vue</h2>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;p&gt;Read Messages&lt;/p&gt;
      &lt;ul&gt;
      &lt;li v-for=&quot;(msg, index) in messages&quot; :key=&quot;index&quot;&gt;
      &lt;b&gt;{{ msg}}&lt;/b&gt;
      &lt;br&gt;
      {{ messages}}
   
  
   &lt;/li&gt;
  &lt;/ul&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {mapState} from 'vuex'
    export default {
      data() {
        return {}
      },
      computed:{
    ...mapState({
            messages:state=&gt;state.messages 
      })
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>In Vue component , I can see messages array inside state changes after adding a message , but same changes are not reflected in read page.</p>