title: Vuejs: Lifecycle hooks of child routerview components using keep alive
body: <p>I'll explain my issue in a more generalized way for the purpose of clear understanding and here is the <a href="https://jsfiddle.net/o01afgy2/" rel="noreferrer">jsFiddle</a></p>
  
  <p>I have two main routes which show two different components in the <code>router-view</code></p>
  
  <ul>
  <li><p><strong>Route-1</strong> when clicked the path is: '/route-1'</p></li>
  <li><p><strong>Route-2</strong> when clicked the path is: '/route-2/sub-route-a'</p></li>
  </ul>
  
  <p><strong>Route-2</strong> contains a another <code>router-view</code> inside it which displays two sub routes that are:</p>
  
  <ul>
  <li><p><strong>sub-route-a</strong></p></li>
  <li><p><strong>sub-route-b</strong></p></li>
  </ul>
  
  <p>When <strong>Route-2</strong> is clicked it opens the component of <strong>Route-2</strong> with <strong>sub-route-a</strong> pre-opened in its <code>router-view</code></p>
  
  <p>Both the main router-view and the router-view inside <strong>Route-2</strong> are wrapped inside <code>keep-alive</code> tag so that they are cached</p>
  
  <p>Caching and everything works fine as expected.</p>
  
  <p>I added all the lifecycle hooks and using console.log to see which hook is called</p>
  
  <ul>
  <li><p>For the first time for all components as expected the <code>beforeCreate()</code> , <code>created()</code>, <code>beforeMount()</code>, <code>mounted()</code> hooks are called.</p></li>
  <li><p>since the router-view is under <code>keep-alive</code> element the <code>activated()</code> hook is also called</p></li>
  <li><p>whenever I move to and fro between <strong>Route-1</strong> and <strong>Route-2</strong> the <code>activated()</code> and <code>deactivated()</code> hooks are called when entered and left respectively for each component</p></li>
  </ul>
  
  <p>Here comes my problem</p>
  
  <ul>
  <li><p>Since when <strong>Route-2</strong> is clicked it opens the component of
  <strong>Route-2</strong> with <strong>sub-route-a</strong> pre-opened in its <code>router-view</code>, all lifecycle hooks of <strong>sub-route-a</strong> componenents are called only once</p></li>
  <li><p>when I go back to <strong>Route-1</strong> <code>deactivated()</code> of <strong>Route-2</strong> is called but no hook of <strong>sub-route-a</strong> is called.</p></li>
  <li><p>only when I toggle between <strong>sub-route-a</strong> and <strong>sub-route-b</strong> the <code>activated()</code> and <code>deactivated()</code> hooks of these components are called</p></li>
  <li><p>on subsequent entering of <strong>Route-2</strong> <code>activated()</code> hook of <strong>Route-2</strong> is called but no hook of <strong>sub-route-a</strong> is called</p></li>
  <li><p>I want to cache <strong>sub-route-a</strong> but make changes to it on every enter. So where do I put the code since no lifecycle hook is being called excrpt for the first time.</p></li>
  <li><p>**I don't want to use ** <code>beforeEnter()</code></p></li>
  </ul>