Vuex. How to render data from store using v-for
<p>I have app with couple components. I use Vuex to store data so I could use it in different components. Now I need to render some divs using v-for. I do as follows:</p>

<p>VueX/Modules/shows.js</p>

<pre><code>const state = {
 shows: [
  {
   name: 'Hard Luck',
   venue: 'The Venue',
   time: '6:00 pm'
  },
  {
   name: 'Hard Luck',
   venue: 'The Venue',
   time: '6:00 pm'
  }
 ]
}

export default {
 state
}
</code></pre>

<p>Component where I need to use data:</p>

<pre><code>  &lt;template&gt;
   &lt;div class="dashboard__details dashboard__details--shows"
      v-for="show in shows"&gt;
    &lt;h3 class="dashboard__name"&gt;
       {{show.name}} @ {{show.venue}}      
     &lt;/h3&gt;
     &lt;span class="dashboard__time"&gt;{{show.time}}&lt;/span&gt;
     &lt;div class="dashboard__btnBlock"&gt;
       &lt;button"&gt;Details&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/template&gt;

   &lt;script&gt;
   import { mapState } from 'vuex'
   import ReportIssue from './ReportIssue'
   import InviteFriend from './InviteFriend'

   export default {
     name: 'dashboard',
     components: { ReportIssue, InviteFriend },
     computed: mapState({
       shows: state =&gt; {
        return state.shows
       }
     })
   }
   &lt;/script&gt;
</code></pre>

<p>It works if I have data in the component's data but I can't make it work if I store data in Vuex. </p>