Computed (or getters) with unchanged value still triggers reactivity.

[Glandos]

First, the playground example.

Explanation

There are two computed values transitiveFromComputed and transitiveFromData that return an array filled with 1 with a length of the number of count divided by 4. count is incremented by the button.
The only difference is that transitiveFromComputed is relying on another computed baseComputed that returns the result of the division, and transitiveFromData is relying on a ref called baseData that is updated to be the same value as baseComputed.

Both transitiveX computed increments a call counter.

Outcome

We can see that transitiveFromComputed is called on every count increment, even if the value of baseComputed didn't change. On the other hand, transitiveFromData is only called when the value of baseData really changed.

What happened?

Is that expected?

The reason

I have a heavy component that use a lot of transitive getter in a Vuetify v-data-table, that redraws every row on each change. But I've noticed that some of those getters are called while their deps have not changed, they are just… getters themselves. This small example shows the real effect in a harmless way, I want to get rid of this :)

[Glandos]

Improved example

I've added a watcher from the computed properties, showing that the watcher is only called when value of the computed is changed.

What I'd expect is that behavior should be built in. Is there any reason for that?

[Glandos]

OK, it seems that it was already known, and fixed in Vue 3.4: https://blog.vuejs.org/posts/vue-3-4#more-efficient-reactivity-system
The PR: #5912

We have no hope for Vue 2 😢