named slot + forceUpdate dont work

[zhangenming]

Version

2.7.15

Reproduction link

codesandbox.io

Steps to reproduce

click button

What is expected?

has reactivity

What is actually happening?

no reactivity

[posva]

The proper way to update the array is with $set() or splice() (https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays).
Note you will see the same issue with <template #default>, this is because with the template you will need to call $forceUpdate() on the child component Swatch as $forceUpdate() doesn't touch children:

<template>
  <div id="app">
    <button @click="f">{{ x }}</button>

    <!-- default slot OK -->
    <Swatches>
      {{ x }}
    </Swatches>

    <!-- named slot BAD -->
    <Swatches ref="sw1">
      <template #qqqqqq>{{ x }} </template>
    </Swatches>
  </div>
</template>

<script>
import Swatches from "./components/Swatches";

export default {
  components: {
    Swatches,
  },
  data: () => ({
    x: [1],
  }),
  methods: {
    async f() {
      // this.$set(this.x, 0, this.x[0] + 1)
      this.x[0]++
      this.$forceUpdate()
      this.$refs.sw1.$forceUpdate()
    },
  },
};
</script>

[zhangenming]

I recommend changing the documentation, with the caveat that forceUpdate only works with unnamed slots