Deeply nested data objects in VueJS
<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>