title: Vue router keep alive nested components after changing pages
body: <p>Example of my issue here: <a href="https://jsfiddle.net/guanzo/myn5o94e/1/" rel="nofollow noreferrer">https://jsfiddle.net/guanzo/myn5o94e/1/</a></p>
  
  <ol>
  <li>App defaults to <code>/bar</code>.</li>
  <li>Click "Go to bar child" which navigates to <code>/bar/barchild</code> and creates the <code>BarChild</code> component.</li>
  <li>Click "Go to Foo" which navigates to <code>/foo</code></li>
  <li>Click "Go to bar". Bar child has disappeared.</li>
  </ol>
  
  <p>Both <code>Foo</code> and <code>Bar</code> are "pages". How do i keep <code>BarChild</code> alive inside <code>Bar</code> when i switch between pages?</p>
  
  <p>I know why <code>BarChild</code> disappears, it's because "Go to bar" links to <code>/bar</code>. But i don't know how to implement my desired behavior.</p>