title: Wait until parent component is mounted / ready before rendering child in vue.js
body: <p>In my SPA app, I have an <code>&lt;app-view&gt;</code> wrapper which handles base app code (load user data, render navbar and footer, etc) and has a <code>slot</code> for rendering the actual page. This <strong>slot is rendered only if the user data is available</strong>.</p>
  
  <p>This wrapper was created because some pages needed a different base code, therefore I couldn't keep this base code in the main app containing <code>&lt;router-view&gt;</code> anymore.</p>
  
  <p>I tried looking if vue-router provides advanced options or suggests a design pattern for switching base code, didn't find anything.</p>
  
  <p>The problem is that the <strong>child component will be rendered before the parent component is mounted</strong>, i.e. before the parent decides not to render the child component (because it's loading user data). This causes errors like <code>undefined as no attribute foo</code>.</p>
  
  <p>Because of that, I'm looking for a way to defer child rendering until its parent is mounted.</p>