Vue 3 reactivity differences Provide/Inject vs this.$slots.default

Question

currently I am working on a PR to the primefaces/primevue repository, which will provide the ability to wrap Column components in custom components for the DataTable. As you can see in the PR (see the previous link) I added a way for Column components to register themselves with the parent DataTable by using the Provide/Inject funcitonality, instead of relying on this.$slots.default to find child Column components like it is currently done in DataTable.

But I found one issue. When a property of my wrapper Column changes, the rendered DataTable doesn't reflect that. After digging deeper I noticed, that this.$.vnode seems to loose it's reactivity when it registers itself with the DataTable.

I could reproduce this with a small example in the Vue 3 Playground HERE. Click on the button and you will see, that the change in the Child component value prop is only picked up, when it is accessed through this.$slots.default. I also tried making the registeredChildren array explicitly reactive by using the following in Parent.vue:

setup(){
  const registeredChildren = reactive([])
  return {registeredChildren}
}

My question is: What are the differences between accessing a vnode by using this.$slots.default and by saving the vnode in an array? How can I make sure, that changes in the vndoe are reflected, by using Provide/Inject?

Any and all help is very much appreciated, thank you!

Answer 1

As it happens, shortly after posting the question I randomly tried using this.$ instead of this.$.vnode and now it works.

So the answer to the question is: There is no difference, if you pass in the correct value.

I updated the playground example.