title: Deeply nested data objects in VueJS
body: <p>I've got a VueJs front end that fetches some data from an API.  The app uses vue-router.</p>
  
  <p>The data fetched for one component is similar to the following:</p>
  
  <pre><code>{
    name: ...,
    email: ...,
    order: {
      data: {
        line_items: [
          {
            quantity: ...
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p>The component is instantiated with a data object called info:</p>
  
  <pre><code>data () {
    return {
      info: {}
    }
  }
  </code></pre>
  
  <p>In the <code>beforeRouteEnter</code> hook, the data is fetched by a vue-resource http.get and  info is set to the body of the result like this: </p>
  
  <pre><code>vm.info = result.body 
  </code></pre>
  
  <p>When the component renders, the following errors are produced:</p>
  
  <p><code>TypeError: undefined is not an object (evaluating _vm.order.data.line_items')</code></p>
  
  <p>In the template, the data is referenced in curly braces as per usual, however, if I just reference info in the template like this:</p>
  
  <p><code>{{ info }}</code></p>
  
  <p>it will output all of the data and not complain at all.</p>
  
  <p>What is the correct way to assign a deeply nested data object?</p>