title: vue js cant understand keep alive
body: <p>I'm doing tests with this code:<br>
  <a href="https://jsfiddle.net/b2qj69o1/25/" rel="nofollow noreferrer">https://jsfiddle.net/b2qj69o1/25/</a></p>
  
  <pre><code>  &lt;button
      v-for="tab in tabs"
      v-bind:key="tab.name"
      v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"
      v-on:click="currentTab = tab"
    &gt;{{ tab.name }}&lt;/button&gt;
  
    &lt;component
      v-bind:is="currentTab.component"
      class="tab"
    &gt;&lt;/component&gt;
  </code></pre>
  
  <p>And the js part</p>
  
  <pre><code>var tabs = [
    {
      name: 'Home', 
      component: function() { 
      alert();  // test
      return new Promise((resolve, reject) =&gt; resolve({ 
        template: '&lt;div&gt;Home component&lt;/div&gt;' 
      }))
      }
    },
    {
      name: 'Posts',
      component: {
        template: '&lt;div&gt;Posts component&lt;/div&gt;'
      }
    },
    {
      name: 'Archive',
      component: {
        template: '&lt;div&gt;Archive component&lt;/div&gt;',
      }
    }
  ]
  new Vue({
    el: '#dynamic-component-demo',
    data: {
      tabs: tabs,
      currentTab: tabs[1]
    }
  })
  </code></pre>
  
  <p>I did the alert() test to see whether vue will re-render the component. I see that with or without wraping <code>&lt;component&gt;</code> with <code>&lt;keep-alive&gt;</code>, the alert() if called only the first time I enter the Home tab. So I have two questions:<br>
  1. What exactly keep-alive does? cause it seems that anyway the component is created only once.<br>
  2. Is it possible for vue to show/hide the tabs, instead of replacing single DOM element? But still not to load the component until it is shown.</p>