title: Vue.js 3 - How can I pass data between Vue components and let both views also update?
body: <p>I tried the following.
  Please note the commented line in parent.vue that doesn't even commit the new state for me.
  However maybe someone can guide me to a better solution for a global state shared by multiple components?</p>
  <p>main.js</p>
  <pre class="lang-js prettyprint-override"><code>import { createApp } from 'vue'
  import App from './App.vue'
  import { createStore } from 'vuex'
  
  const app = createApp(App);
  export const store = createStore({
      state: {
          textProp: 'test',
          count: 1
      },
      mutations: {
          setState(state, newState) {
              console.log('setState');
              state = newState;
          }
      },
      getters: {
          getAll: (state) =&gt; () =&gt; {
              return state;
          }
      }
  
  });
  app.use(store);
  app.mount('#app')
  </code></pre>
  <p>parent.vue</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;seperator&quot; v-bind:key=&quot;item&quot; v-for=&quot;item in items&quot;&gt;
        &lt;child&gt;&lt;/child&gt;
      &lt;/div&gt;
      &lt;button @click=&quot;toonAlert()&quot;&gt;{{ btnText }}&lt;/button&gt;
      &lt;button @click=&quot;veranderChild()&quot;&gt;Verander child&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import child from &quot;./child.vue&quot;;
  import {store} from '../main';
  
  export default {
    name: &quot;parent&quot;,
    components: {
      child,
    },
    store,
    data: function () {
      return {
        items: [
          {
            id: 1,
            valueText: &quot;&quot;,
            valueNumber: 0,
          },
          {
            id: 2,
            valueText: &quot;&quot;,
            valueNumber: 0,
          },
          {
            id: 3,
            valueText: &quot;&quot;,
            valueNumber: 0,
          },
        ],
      };
    },
    props: {
      btnText: String,
    },
    methods: {
      toonAlert() {
        alert(JSON.stringify(this.$store.getters.getAll()));
      },
       veranderChild() {
         console.log('child aan het veranderen (parentEvent)');
         this.$store.commit('setState', { // This is especially not working.
               textProp: 'gezet via de parent',
               count: 99
           })
         this.$store.commit({type: 'setState'}, {
           'textProp': 'gezet via de parent',
            'count': 99
            });
      },
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  .seperator {
    margin-bottom: 20px;
  }
  
  .parent {
    /* background: lightblue; */
  }
  &lt;/style&gt;
  </code></pre>
  <p>child.vue</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;child&quot;&gt;
      &lt;div class=&quot;inputDiv&quot;&gt;
        text
        &lt;input @change=&quot;update&quot; v-model=&quot;deText&quot; type=&quot;text&quot; name=&quot;deText&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;inputDiv&quot;&gt;
        nummer
        &lt;input v-model=&quot;hetNummer&quot; type=&quot;number&quot; name=&quot;hetNummer&quot; /&gt;
      &lt;/div&gt;
      &lt;button @click=&quot;toonState&quot;&gt;Toon huidige state&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import {store} from '../main';
  
  export default {
    name: &quot;child&quot;,
    store,
    data: function() {
      return {
        'hetNummer': 0
      }
    },
    methods: {
      update(e) {
        let newState = this.$store.state;
        newState.textProp = e.target.value;
        // this.$store.commit('setState', newState);
      },
      toonState()
      {
        console.log( this.$store.getters.getAll());
      }
    },
    computed: {
      deText: function() {
        return '';
        // return this.$store.getters.getAll().textProp;
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  .inputDiv {
    float: right;
    margin-bottom: 10px;
  }
  .child {
    max-width: 300px;
    height: 30px;
    margin-bottom: 20px;
    /* background: yellow; */
    margin: 10px;
  }
  &lt;/style&gt;
  </code></pre>