storeToRefs evaluates any computed from setup store in vue@2.7

[mcastagnetti]

Reproduction

https://codesandbox.io/p/sandbox/restless-sun-to46zm?file=%2Fsrc%2FApp.vue

Steps to reproduce the bug

It occurs with vue@2.7 and pinia@2.0.33

When visiting the page of the codesandbox, you'll see an Evaluated log.
This log is in the computed definition and should only be triggered when the computed is evaluated.

const doubleCount = computed(() => {
  console.log("Evaluated")

  return count.value * 2
})

Expected behavior

We should see the Evaluated log only once the doubleCount is evaluated.

Actual behavior

The doubleCount is evaluated once storeToRefs is called like below, even if doubleCount is never used in the app.

const counterStore = useCounterStore();
const { count } = storeToRefs(counterStore);

Additional information

This behavior has been seen using an up to date version of chrome and safari.
This does not happen using the same code running on stackblitz and we are not sure why 🤷
With or without the vue devtools

Based on the github repository https://github.com/mcastagnetti/storeToRefs-vue-2.7-bug

[posva]

This is a consequence of calling toRef(). It happens with plain Vue and is unfortunately necessary. See https://github.com/vuejs/pinia/blob/v2/packages/pinia/src/storeToRefs.ts#L42C10-L46 for more details.

[nicooprat]

Thanks for the explanation.

For others: be careful that it can create weird behaviors when migrating from Vuex where getters were lazy-evaluated

[posva]

Note getters are also lazy evaluated here. Converting them to refs will give you the same behavior in Vue, Vuex, or Pinia