Cannot use <fragment> in recursive component

[viruscamp]

The code sample is in https://codesandbox.io/s/2wqk1kyx7n

SimpleTreeNode is normal recurisive tree rendered as ul>li>ul which works well.

FlatTreeNode is just like SimpleTreeNode , except using fragment . FlatTreeNode tries to render tree in a table.

It is ok to expand node '3 - n3' and then collapse it. But when you collapse the node '2 - n2' and then expand it, it report error: 'DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.'.

<template>
  <fragment>
    <slot :item="item" :indent="indent" />
    <template v-if="item.expanded">
      <flat-tree-node v-for="child in item.children" :key="child.id"
        :item="child" :indent="indent + 1">
        <template slot-scope="slotProps">
          <slot v-bind="slotProps" />
        </template>
      </flat-tree-node>
    </template>
  </fragment>
</template>