Component is destroyed and then mounted

[gamperl]

Version

2.5.16

Reproduction link

https://codepen.io/gamperl/pen/JZGMWK

Steps to reproduce

Run the provided JSFiddle

What is expected?

The component in the slot should be moved from the table to the div element. Or a new one is created and the old one is destoryed.

What is actually happening?

If a slot is moved from a table to a div using a v-if directive, the slot ist recreated. But before the new component is mounted, vuejs picks the wrong component to destroy: it destoyes the new component instead of the old one.

[haoqunjiang]

This bug seems to be caused by slot caching mechanism in the VDOM algorithm.
The new VNode tree and the old one, despite having different roots, share a same reference to the named slot, thus leading to the confusion in the patching process.

[haoqunjiang]

A workaround is to attach the slot attribute to a template element instead of div.

<cmp-panel>
  <template slot="menu">
    <cmp-body></cmp-body>
  </template>
</cmp-panel>

[haoqunjiang]

Marking this as duplicate of #7975 as both reflect the same underlying issue