title: [Vue warn]: Error in render: “TypeError: Cannot read property ‘name’ of undefined”
body: <p>I get the error </p>
  
  <blockquote>
    <p>TypeError: Cannot read property ‘name’ of undefined”</p>
  </blockquote>
  
  <p>if I go to deep in the object.</p>
  
  <p>Timeline.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-md-offset-2"&gt;
              &lt;div class="card card-default"&gt;
                  &lt;div class="card-header"&gt;Timeline&lt;/div&gt;
  
                  &lt;div class="card-body"&gt;
                      &lt;post v-for="post in posts" :key="post.id"&gt;&lt;/post&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Post from './Post.vue'
  
  export default {
      data () {
          return {
              posts: []
          }
      },
      components: {
          Post
      },
      mounted() {
          this.$http.get('/posts').then((response) =&gt; {
              console.log(response.body)
              this.posts =response.body
          })
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>post.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="media"&gt;
  
      &lt;div class="media-left"&gt;
  
      &lt;/div&gt;
      &lt;div class="media-body"&gt;
          &lt;strong&gt;test&lt;/strong&gt;
          &lt;strong&gt;{{ post.user.name }} &lt;/strong&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
     props: [
          'post'
      ]
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Then why I get the error?
  I suppose some problem with {{ post.user.name }}.</p>