title: Vue.js <keep-alive> in template for slot not working
body: <p>I'm working with a component that was built out called 'Stepper' it's a basic component that has the steps at the top to guide the user through a process. In this stepper we have a dynamic number of slots that are produced and we pass a component in to fill that slot.</p>
  <p>Stepper.vue</p>
  <pre class="lang-html prettyprint-override"><code>...
  &lt;div v-for=&quot;step in steps&quot; :key=&quot;step.name&quot;&gt;
    &lt;div class=&quot;stepper-pane&quot; v-if=&quot;step.name === currentItem.name&quot;&gt;
      &lt;slot :name=&quot;`${step.name}`&quot; /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  <p>Parent.vue</p>
  <pre class="lang-html prettyprint-override"><code>...
  &lt;Stepper :items=&quot;steps&quot;
    &lt;template v-for=&quot;step in steps&quot; v-slot:[step.name] :key=&quot;step.name&quot;&gt;
      &lt;keep-alive&gt;
        &lt;component :is=&quot;step.component&quot; /&gt;
      &lt;/keep-alive&gt;
    &lt;/template&gt;
  &lt;/Stepper&gt;
  ...
  
  &lt;script lang=&quot;ts&quot;&gt;
  ...
  import Stepper from &quot;@/components/Stepper.vue&quot;;
  import Component1 from &quot;@/components/Component1.vue&quot;;
  import Component2 from &quot;@/components/Component2.vue&quot;;
  
  export default defineComponent({
    name: &quot;ParentComponent&quot;,
    components: {
      Stepper,
      Component1,
      Component2,
    },
    setup() {
      const steps = ref([
        {
          name: &quot;step1&quot;,
          label: &quot;Step 1&quot;,
          component: &quot;Component1&quot;,
        },
        {
          name: &quot;step2&quot;,
          label: &quot;Step 2&quot;,
          component: &quot;Component2&quot;,
        },
      ]);
  
      return {
        steps,
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>All in all everything is working. The component for each step displays, the steps increment so on and so forth. The issue we're having is that the <code>&lt;keep-alive&gt;</code> is not working. Every time you go back or forth in the steps the component re-renders and we're seeing the <code>onMounted</code> hook called. Granted we can pre-populate the form with some 'saved' data if needed but would be nice if we could get the <code>&lt;keep-alive&gt;</code> to work. We've also tried adding the <code>:include=&quot;[COMPONENT_NAMES]&quot;</code> to the <code>&lt;keep-alive&gt;</code> as well, to no avail.</p>
  <p>Edit: Updated code snippet with more details.</p>