title: Vue.JS nested v-for throwing null/undefined error
body: <h1>Updated at end of question.</h1>
  
  <p>I have a Vue component with the following data:</p>
  
  <pre><code>conversations: null,
  currentConversation: null,
  </code></pre>
  
  <p>and the following method, which runs on <code>mounted()</code>:</p>
  
  <pre><code>/**
   * Method to retrieve the user's conversations.
   */
  getConversations() {
      axios.get('/api/user/conversations')
      .then((response) =&gt; {
          this.conversations = response.data;
      })
      .catch((error) =&gt; {
          console.log(error);
      })
  },
  </code></pre>
  
  <p>In the <code>&lt;template&gt;</code>, I display each conversation using the following:</p>
  
  <pre><code>&lt;template v-for="conversation in conversations"&gt;
      &lt;div class="conversation"&gt;
          &lt;p&gt;
              &lt;!-- Template for each user --&gt;
              &lt;template v-for="(user, index) in conversation.users"&gt;
              {{ user.first_name }} {{ user.last_name }}&lt;span v-if="index != (conversation.users.length - 1)"&gt;,&lt;/span&gt;
              &lt;/template&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In the <code>&lt;template&gt;</code> for the current conversation, I am attempting to use the following:</p>
  
  <pre><code>&lt;template v-for="message in currentConversation.messages"&gt;
      &lt;div class="message"&gt;
          &lt;div class="bubble"&gt;
              {{ message.content }}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>When initially mounted, both <code>conversations</code> and <code>currentConversation</code> are null. The template for displaying <code>conversations</code> works fine. It's empty until the Ajax request returns the data. However, the <code>currentConversation</code> throws the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'messages' of null
  </code></pre>
  
  <p>The <code>currentConversation</code> object is later retrieved via Ajax when a user selects a conversation to view.</p>
  
  <p>I have found that if I wrap the current conversation <code>&lt;template&gt;</code> in another <code>div</code> with a <code>v-if="currentConversation"</code> directive, the error does not show up, and the template renders properly. However, since I don't have to use the <code>v-if</code> hack on the conversations <code>&lt;template&gt;</code>, why would I need to use it on the current conversation <code>&lt;template&gt;</code>?</p>
  
  <p><strong>Updated:</strong> Thanks to @wing and @Traxo, initializing with an empty array works. However, I do not understand why I must set an empty array initially for <code>currentConversation</code>, but don't for <code>conversations</code>.</p>