Vue-next: Slot of <component> is cached

[FrankFang]

Version

3.0.0-rc.9, 3.0.0-rc.6, 3.0.0-rc.1

Reproduction link

https://codepen.io/FrankFang/pen/jOqweRE?editors=0010

Steps to reproduce

click the button to set "selected" to "tab2"

What is expected?

"content 1" turns to "content 2"

What is actually happening?

"content 1" stays there

[posva]

Not completely sure of the usage of slots like that but this also fails:

setup(props, context){
    return () => {
      const defaults = context.slots.default()

      const current = defaults.filter((tag) => {
        return tag.props.title === props.selected
      })[0]

      console.log('tab', current)

      return h('div', {}, current)
    }
  }

Adding a key makes it work:

return h('div', {}, Vue.cloneVNode(current, { key: props.selected }))

[FrankFang]

Isn't it a bug?

[FrankFang]

I've updated the demo: https://codepen.io/FrankFang/pen/dyMzOBd?editors=0010
It's a simple tab switcher with a bug.

1. click tab 1
2. click tab 2

expected: content changes
fact: content never changes

[yyx990803]

When using <component :is="vnode"> and passing vnode of the same type, you need to provide keys:

<component :is="current" :key="selected" />

Otherwise, you are passing two compiled vnodes of the same type to the renderer. Because they are compiled as completely static, they will not be updated at all.