title: Vue Keep-Alive - Component won't stay alive during route changes
body: <p>I defined the main page of my vue app to look like this:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;keep-alive&gt;
        &lt;app-header&gt;&lt;/app-header&gt;
      &lt;/keep-alive&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  import appHeader from '../components/Header';
  
  export default {
    components: {
      appHeader
    }
  /* etc... */
  }
  </code></pre>
  
  <p>My app UI is basically this Dashboard, with many different routes and sub-routes paths to show many pages, but in all pages (components) I want to show the app-header at the top of the page.</p>
  
  <p>The problem is that I noticed recently, with every button clicked (that changes vue-router's route to another page), the app-header gets recreated (the created() lifecycle hook function is called)</p>
  
  <p>I really don't understand why, since I added keep-alive, shouldn't it be rendered once?</p>
  
  <p>Please help me figure this out, I am stuck, I literally researched the entire internet about it.</p>
  
  <p>Thanks in advance</p>