Maxmium recursive updates exceeded

Reproduction

Repro example see master branch: https://github.com/slauzinho/pinia-bug-repro

When rendering a value returned by an action that uses another store that has already been initialised it get: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Steps to reproduce the behavior

const useCounterStore = defineStore({
  id: "counterStore",
  state: () => ({
    currentValue: 0
  }),
  actions: {
    increment() {
      this.currentValue++;
    },
    decrement() {
      this.currentValue--;
    }
  }
});

const useWarningStore = defineStore({
  id: "warningStore",
  actions: {
    isBigger(value: number) {
      const counterStore = useCounterStore();
      return counterStore.currentValue > value;
    }
  }
});

My Warning Page is like this:

<template>
  <div>Is Value bigger then 4 {{ warningStore.isBigger(4) }}</div>
</template>

My homepage:

<template>
  <div>Hello from home</div>
  <div>Current count value is: {{ counterStore.currentValue }}</div>
  <div>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.decrement">Decrement</button>
  </div>
  <router-link to="/warning">Go to warning screen</router-link>
</template>

On the homepage we initialise the counterStore and on the Warning page we initialise the useWarningStore.

If I go from Homepage to the Warning page I get the following warning: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

• If I go directly to the Warning page I don’t get an error.
• If I initialise the useWarningStore on the homepage I don’t get the error
• If I use computed instead of calling warningStore.isBigger(4) directly I don’t get the error (see this branch)

This seems to happen only on certain cases, for instance this example is very similar but doesn’t cause the cursive warning.

Expected behavior

No recursive issues

Actual behavior

Gives recursive warning crashing the page in production.

[posva]

yes

[slauzinho]

Awesome, thanks for your help 🙏