Slot throws warning when passed down to component and rerendered

[ilicmarko]

Version

3.0.11

Reproduction link

Gist with SFC Link

SFC Direct Link

Steps to reproduce

Create 3 components :

1. GrandParent - should accept some data that re-renders a slot, for example, array of objects.
2. Parent
3. Child

GrandParent passes down all it's slots to the Parent component:

return h(Parent, { data: this.data }, this.$slots)

Parent component should render the slot inside the Child

h(Child, {} , {
 default: () => row.key
}))

In the root app (App.vue) call the GrandParent and add a slot

<GrandParent :data="data">
    <template #cell-hello>Test</template>
  </GrandParent>

Now asynchronously update the data array and Vue will throw a read-only warning for the given slot:

Set operation on key "cell-hello" failed: target is readonly. {__vInternal: 1, cell-hello: ƒ}

What is expected?

Not to throw a warning

What is actually happening?

Throwing a warning but everything works.

---

This started happening after updating to 3.0.11. AFAIK this is related to #3523 and started happening after this update.

[ais-one]

Hi,

I think this should be escalated and not flagged as a P3-monor-bug...

vueComponent/ant-design-vue#3998 (comment)

The number of warnings increases as the number of components on the page increases...

[wenfangdu]

This is quite annoying, please fix this ASAP 🙏.

[HcySunYang]

Mark this as p4