Element is removed inside keep-alive

[h0rn3z0r]

Demo: https://jsfiddle.net/580kqz4n

<template>
  <fragment>
    <keep-alive>
      <component :is="children[index]"></component>
    </keep-alive>
    
    <button @click="index++">next</button>
  </fragment>
</template>

<script>
const { Fragment } = Frag

export default {
  components: {
    Fragment,
    child1: { template: "<div>child1</div>" },
    child2: { template: "<div>child2</div>" },
    child3: { template: "<div>child3</div>" }
  },
  data() {
    return {
      index: 0,
      children: ["child1", "child2", "child1", "child3", "child1"]
    }
  }
}
</script>

How to reproduce

Click the button 4 times. You should see component names as they are listed in the children array. On the 4th click, instead of child1, nothing is shown. The element is removed from DOM. This does not happen without keep-alive or fragment.

Versions

Vue: 2.6.14
v-frag: 1.4.0

[h0rn3z0r]

updated broken demo link

[privatenumber]

Thanks for the bug report. PR Welcome if you have a fix.

[privatenumber]

Released in https://github.com/privatenumber/vue-frag/releases/tag/v1.4.3