vue: Uncaught TypeError: Cannot read property ... of undefined : <p>I'm using vue@2.1.3 and the <a href="https://github.com/vuejs-templates/webpack" rel="noreferrer">vue official webpack template</a> to build an app.</p>

<p>When developing locally, I often see the warning <code>Uncaught TypeError: Cannot read property ... of undefined</code>, but the HTML can be rendered successfully. However, the HTML can't be rendered when it's deployed to Netlify with <code>npm run build</code> command. So I have to treat this warning seriously.</p>

<p>I learned from <a href="https://forum-archive.vuejs.org/topic/3953/cannot-read-property-warning/2" rel="noreferrer">here</a> that it's because "the data is not complete when the component is rendered, but e.g. loaded from an API." and the solution is to "use <code>v-if</code> to render that part of the template only once the data has been loaded."</p>

<p>There are two questions:</p>

<ol>
<li>I tried wrap <code>v-if</code> around multiple statements that's generating the warning but personal I think this solution is verbose. Is there a neat approach?</li>
<li>"warnings" in local development turn into "fatal errors"(HTML can't be rendered) in production. How to make them the same? e.g. both of them issue warnings or errors?</li>
</ol>
