title: Error in render function: "TypeError: Cannot read property of undefined" in Vue
body: <p>I am using Laravel and vue-router.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="content__inner"&gt;
          &lt;div class="forums"&gt;
  
              &lt;!-- Heading --&gt;
              &lt;div class="forums__heading" :style="'border-bottom:2px solid #' + board.category.color"&gt;
                  &lt;div class="lg-8 md-8 sm-12 column column__first"&gt;
                      &lt;h2 class="forums__heading__title"&gt;{{ board.title }}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="lg-1 md-1 sm-1 dtop column text-center"&gt;
                      &lt;strong&gt;Replies&lt;/strong&gt;
                  &lt;/div&gt;
                  &lt;div class="lg-3 md-3 sm-4 column text-right"&gt;
                      &lt;strong&gt;Latest Reply&lt;/strong&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Content --&gt;
              &lt;div class="forums__content"&gt;
                  {{ board.category }}
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
  
          data() {
              return {
                  board: [],
              }
          },
  
          created() {
              this.fetch_board(this.$route.params.slug);
          },
  
          methods: {
  
              /**
               * Fetch the board.
               *
               * @param string slug   The slug for the board.
               */
              fetch_board(slug)
              {
                  this.$http.get('/api/forums/board/' + slug).then((response) =&gt; {
                      this.board = response.data;
                  });
              },
  
          }
  
      };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The 'fetch_board' function returns an object like the following:</p>
  
  <pre><code>board:Object {
      id:5,
      title:"Game Discussion",
      slug:"5-game-discussion",
      description:"General talk about the game.",
      restriction:null,
      category_id:2,
      category:Object {
          id:2
          title:"Community",
          color:"2ECC71",
          created_at:"2017-05-02 07:30:25",
          updated_at:"2017-05-02 07:30:25",
      }
      created_at:"2017-05-02 07:30:25",
      updated_at:"2017-05-02 07:30:25",
  }
  </code></pre>
  
  <p>When I access the <code>{{ board.category }}</code> it displays the object correctly; but when I access <code>{{ board.category.title }}</code> it displays the title, but ALSO gives a TypeError.</p>
  
  <p>Why I am getting this error if the data is being loaded correctly?</p>
  
  <p>How can I avoid/fix this error?</p>