title: VueJs / Vuex : Rendering list of items
body: <p>I'm trying to render a list of <strong>offers</strong> from my <strong>vuex store</strong>. The problem is when i'm loading my <em>list of offers</em> page, they are not rendered.</p>
  
  <p>Here is my code :</p>
  
  <p><strong>offers.js</strong></p>
  
  <pre><code>export const namespaced = true
  
  export const state = {}
  
  export const mutations = {
  
    [types.UPDATE_OFFERS] (state, offers) {
      Object.assign(state, offers)
    }
  }
  
  export const actions = {
  
    async fetchOffers ({ commit }) {
      const { data } = await axios.get('/api/offers')
      commit(types.UPDATE_OFFERS, data)
    }
  }
  </code></pre>
  
  <p><strong>offers.vue</strong> (my page component)</p>
  
  <pre><code>&lt;template&gt;
  
              &lt;div&gt;
  
                &lt;div v-if="offers"
                     v-for="offer in offers"
                     :key="offer.id"&gt;
  
                  &lt;div&gt;
  
                    &lt;div&gt;
  
                      &lt;router-link :to="{ name: 'offer', params: { offer: offer.id } }"&gt;
                         {{ offer.project }}
                      &lt;/router-link&gt;
  
                    &lt;/div&gt;
  
                    &lt;div&gt;
  
                      &lt;div v-if="offer.versions[0] &amp;&amp; offer.versions[0].status == 'edition'"&gt;
                         Validate the offer
                      &lt;/div&gt;
  
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapGetters } from 'vuex'
  
  export default {
  
    computed: {
      ...mapState(['offers'])
    },
  
    beforeMount () {
      this.$store.dispatch('offers/fetchOffers')
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When i'm loading the page, I can see that the store as loaded the offers but the page doesnt render them. The weird thing is when I load the page <strong><em>offers</em></strong> then another page (example <strong><em>createAnOffer</em></strong>) and then I come back to <strong><em>offers</em></strong>, it renders the offers proplery.</p>
  
  <p>I tried beforemount, beforeCreate, mounted, created.</p>
  
  <p>I admit I have no clue what's going on.</p>
  
  <p>Any tip ?</p>
  
  <p>Thank you for your answers.</p>
  
  <p>Louis</p>