title: How to remove Vuejs "scope is undefined' warning?
body: <p>As a beginner with Vue.js, I have a component that looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;a href="{{ data.uk_store_link }}"&gt;
        {{ data.title }} - {{ data.artist.name }}
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['data']
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>"data.artist.name" is present and correct in the object that is passed to the data prop. But how can I get rid of the warning that pops up about the nested artist name?</p>
  
  <blockquote>
    <p>[Vue warn]: Error when evaluating expression "data.artist.name":
    TypeError: scope.data.artist is undefined (found in component:
    &lt;release>)</p>
  </blockquote>
  
  <p>ETA: Ah, sorry, yes, it would have been helpful to show the "data":</p>
  
  <blockquote>
    <p>{ "id": 23182, "title": "Music from 'Likely Stories'",
    "uk_store_link":
    "<a href="http://store.roughtraderecords.com/...html" rel="nofollow">http://store.roughtraderecords.com/...html</a>",
    "artist": { "id": 1176, "name": "Jarvis Cocker" } }</p>
  </blockquote>
  
  <p>I've stripped out some fields there for brevity, but hopefully this demonstrates that data.artist.name does actually exist. It certainly gets successfully output to the page, despite the warning.</p>