title: Vue app only renders API data correctly in local dev, not in production build (using vuex, axios, and parcel)
body: <p>I've got a basic client-side rendered vue app that fetches <a href="https://groceries-vue-api.glitch.me/get" rel="nofollow noreferrer">a json array from an API endpoint</a> and renders data from each array item as a list item in an ordered list.</p>
  
  <p>The data renders as expected when I'm developing locally, using <code>parcel index.pug</code> to spin up my local dev environment. Here's a screenshot of the expected ordered list as shown in my local dev environment at <code>localhost:1234</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/ypNyD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ypNyD.png" alt="enter image description here"></a></p>
  
  <p>However, the data does not render as expected when I build for production (using <code>parcel build index.pug</code>). Here's a screenshot of the unexpected behavior in production mode (which you can see live online at <a href="https://errands.netlify.com/" rel="nofollow noreferrer">https://errands.netlify.com/</a>):</p>
  
  <p><a href="https://i.stack.imgur.com/eytit.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eytit.png" alt="enter image description here"></a></p>
  
  <p>Notice that the production version knows the fetched API data is an array with a length of 6 (because it renders out 6 empty <code>&lt;li&gt;</code>s), but for some reason the production version does not know the data inside each array object.</p>
  
  <p>The full source code for this app is here, <a href="https://github.com/brianzelip/groceries-vue" rel="nofollow noreferrer">https://github.com/brianzelip/groceries-vue</a>.</p>
  
  <p>The main relevant code (the axios call to the API, which updates the vuex store, then renders out the ordered list) lives in <a href="https://github.com/brianzelip/groceries-vue/blob/master/src/components/GroceryForm/TheGroceryForm.vue" rel="nofollow noreferrer"><code>TheGroceryForm.vue</code></a>, which is also included here:</p>
  
  <pre><code>&lt;template&gt;
    &lt;form action="/submit" method="POST"&gt;
      &lt;ol class="list-reset border rounded"&gt;
        &lt;li class="item" v-for="item in allGroceryItems" v-bind:key="item._id"&gt;
          &lt;GroceryFormItemEditLink/&gt;
          &lt;GroceryFormItemCheckboxInput :slug="item.slug"/&gt;
          &lt;GroceryFormItemCheckboxLabel :slug="item.slug" :name="item.name"/&gt;
          &lt;GroceryFormItemQtySelector :slug="item.slug"/&gt;
          &lt;GroceryFormItemStoresSelector
            :stores="item.stores"
            :slug="item.slug"
            :defaultStore="item.defaultStore"/&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  
  import GroceryFormItemEditLink from './GroceryFormItemEditLink.vue';
  import GroceryFormItemCheckboxInput from './GroceryFormItemCheckboxInput.vue';
  import GroceryFormItemCheckboxLabel from './GroceryFormItemCheckboxLabel.vue';
  import GroceryFormItemQtySelector from './GroceryFormItemQtySelector.vue';
  import GroceryFormItemStoresSelector from './GroceryFormItemStoresSelector.vue';
  
  export default {
    data() {
      return {};
    },
    components: {
      GroceryFormItemEditLink,
      GroceryFormItemCheckboxInput,
      GroceryFormItemCheckboxLabel,
      GroceryFormItemQtySelector,
      GroceryFormItemStoresSelector
    },
    computed: {
      allGroceryItems() {
        return this.$store.state.allGroceryItems;
      },
      allGroceryItemsCount() {
        return this.$store.getters.allGroceryItemsCount;
      }
    },
    getters: {},
    created() {
      axios
        .get('https://groceries-vue-api.glitch.me/get')
        .then(res =&gt; {
          console.log('axio.get worked! res.data =', res.data);
          console.log(`typeof res.data = ${typeof res.data}`);
  
          const groceryData = res.data;
          console.log('groceryData =', groceryData);
          console.log(`typeof groceryData = ${typeof groceryData}`);
  
          const newData = res.data.map(obj =&gt; obj);
          console.log('newData', newData);
          return newData;
        })
        .then(data =&gt; {
          console.log('data from second then() =', data);
          return data;
        })
        .then(data =&gt; (this.$store.state.allGroceryItems = data))
        .catch(error =&gt; {
          console.log('ERROR! -&gt;', error);
        });
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Why does the data change when I build my app for production? And how can I change this behavior to get the expected outcome?</strong></p>