title: How to loop through an array of objects passed to a component with Vuex Store & a computed property?
body: <p>I'm building a project to learn <strong><a href="https://vuex.vuejs.org/" rel="nofollow noreferrer">Vuex</a></strong>. I'm creating an array of objects in my <strong><code>store</code></strong> like so:</p>
  
  <p><strong>Vuex Store:</strong></p>
  
  <pre><code>import Vue from "vue";
  import Vuex from "vuex";
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      users: [
        { id: 1, name: 'John Doe', email: 'johndoe@gmail.com' },
        { id: 2, name: 'Jane Doe', email: 'janedoe@gmail.com'  },
        { id: 3, name: 'Mark Greywood', email: 'markgreywood@gmail.com'  },
      ]
    },
    mutations: {},
    actions: {},
    modules: {}
  });
  </code></pre>
  
  <p>Now, I'm accesing the <strong><code>state</code></strong> in the component with a computed property like so:</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="home"&gt;
      &lt;h1&gt;Hello from Home component&lt;/h1&gt;
  
     &lt;!-- I do not loop through the users, nothing shows --&gt; 
      &lt;div v-for="user in users" :key="user.id"&gt;{{ user.name }} &lt;/div&gt;
  
     &lt;!-- I get the users object in the DOM --&gt;
      &lt;div&gt;{{ getUsers }}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {
    name: "Index",
    computed: mapState({
      getUsers: state =&gt; state.users
    })
  };
  &lt;/script&gt;
  
  &lt;style scoped lang="less"&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I don't understand what I'm doing wrong. </p>