title: Vue JS: vuex state not updating the component after change
body: <p>I created an info-bar, an area I want to update with info from the component. I added it as a child of <code>App.vue</code> :</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;InfoBar /&gt;  // my info-bar
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>To be able to update m<code>&lt;InfoBar /&gt;</code> from other components, I decided to try using <code>Vuex</code> and use <code>mutations</code> to change info:</p>
  <p><strong>Vuex Store:</strong></p>
  <pre><code>   export const store = new Vuex.Store({
          state:{
              infoBarText: &quot;Text from Vuex store&quot; ,  // initial text for debugging         
          },
          mutations:{
              setInfoBarText(state,text){
                  state.infoBarText = text;
              }
          }
  </code></pre>
  <p><strong>infobar.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      {{infoString}} // the result is always &quot;Text from Vuex store&quot;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;infoBar&quot;,
    data() {
      return {
        infoString: this.$store.state.infoBarText      
      }
    }
  </code></pre>
  <p>Now, I would like to update the text using the Vuex mutation from other component:</p>
  <p><strong>other.vue:</strong></p>
  <pre><code>mounted() {
   this.$store.commit(&quot;setInfoBarText&quot;, &quot;Text from Component&quot;);
  }
  </code></pre>
  <p>I checked the <code>state</code> of <code>infoBarText</code> with Vue developer tools and it successfully changed to <code>&quot;Text from Component&quot;</code> but it's not changed the text in the component.</p>
  <p>What I am doing wrong?</p>