title: [Vue warn]: Error in render: "TypeError: Cannot read property '0' of null"
body: <p>I am completely lost on this one, spent a good 5 hours on it, cannot find a solution.</p>
  
  <p>I have an API call that commit an action on catch error. The action then mutate a state which is the error message from the catch error as below:</p>
  
  <p><strong>action</strong></p>
  
  <pre><code>retrieveToken(context, credentials) {
      axiosOne.post('/login', {
      username: credentials.username,
      password: credentials.password,
      })
          .then(response =&gt; {
  
          })
          .catch(error =&gt; {
                  const errorMessages = error.response.data.errors;
                  context.commit('apiErrorMessage', {errorMessages});  &lt;-----
          });
  },
  </code></pre>
  
  <p><strong>mutation</strong></p>
  
  <pre><code>apiErrorMessage(state, payload) {
      state.apiErrorMessage = payload.errorMessages;
      console.log(payload.errorMessages);
  },
  </code></pre>
  
  <p>state</p>
  
  <pre><code>state: {
      apiErrorMessage: {}
  },
  </code></pre>
  
  <p>It looks like the state of the object has some kind of a delay and is still undefined by the time the v-if tries to access it, causing the below error:</p>
  
  <pre><code>`[Vue warn]: Error in render: "TypeError: Cannot read property '0' of null"`
  </code></pre>
  
  <p>What is the best way to use v-if when the object is still undefined?</p>
  
  <pre><code>    &lt;transition name="slide-fade"&gt;
          &lt;div v-if="apiErrorMessage"&gt;
  //also tried this  &lt;div v-if="Object.keys(apiErrorMessage).length &gt; 0"&gt;
          &lt;b-alert v-for="(value, index) in apiErrorMessage" variant="warning" :key="index"&gt;{{ value[0] }}&lt;/b-alert&gt;
          &lt;/div&gt;
      &lt;/transition&gt;
  
      &lt;script&gt;
          import {
              mapState
          } from 'vuex';
  
          export default {
              data() {
                  return {
  
                  }
              },
              computed: mapState([
                  'apiErrorMessage',
              ])
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>Thank you.</p>