Subscribe on changes!

Using provide on global properties breaks reactivity

avatar
Nov 21st 2023

Vue version

3.3.8

Link to minimal reproduction

https://codepen.io/samoslag/pen/bGzLyEy

Steps to reproduce

Uncomment line 5 in example.

What is expected?

Provide a computed property that gets value from global properties.

What is actually happening?

Referencing computed in provide breaks it's reactivity.

System Info

No response

Any additional comments?

Can be resolved by

provided: computed(() => this.test)
avatar
Nov 21st 2023

you provided the return value from the computed property, so yes, that can't be reactive. That's not a bug.

Your proposal how to resolve this is actually the documented way to go:

https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity