title: Vue.js undefined error on object value when loaded and rendered
body: <p>OK. I'm not a total newbie and do have some Vue xp but this is bugging me. What really obvious thing am I missing.</p>
  
  <p>I have an object loaded via an ajax call inside a mounted method:</p>
  
  <pre><code>job: {
    "title": "value",  
    "location": {
      "name":"HONG KONG"
    }
  }
  </code></pre>
  
  <p>When I call {{ job.title }} all good. When I call {{ job.location.name }} I have an undefined error but the value renders. When I call {{ job.location }} I get the json object so it is defined.</p>
  
  <p>Aaargh! I'm sure it's really simple but can't possibly see why this isn't as straight forward as it should be.</p>
  
  <p>// Additional</p>
  
  <p>This is my entire Vue class</p>
  
  <pre><code>    const router = new VueRouter({
          mode: 'history',
          routes: []
      });
      const app = new Vue( {
        router,
        el: '#app',
        data: {
          job: {}
        },
        mounted: function () {
          var vm = this
          jQuery.ajax({
              url: 'https://xxx' + this.jobId,
              method: 'GET',
              success: function (data) {
                  vm.job = data;
              },
              error: function (error) {
                  console.log(error);
              }
          });
        },
        computed: {
          jobId: function() {
              return this.$route.query.gh_jid
          }
        }
      })
  </code></pre>