Watch handler was called unexpected in vue2 with pinia

[reuwi]

Reproduction

https://github.com/reuwi/pinia-vue2-watch-bug-repro/tree/master

Steps to reproduce the bug

Step1: Clone this repo to local

git clone git@github.com:reuwi/pinia-vue2-watch-bug-repro.git

Step2: install dependencies

npm install && npm run serve

Step3: open http://localhost:8081/ in browser

Expected behavior

No alert is promoted

Actual behavior

Got an promoted alert with 'lol changed'

Additional information

After some debugging, I guess that the problem may came from initWatch when collect dependencies. When excute get function to add dep, pinia will travers the state object, which cause wrong dependency relation.

[posva]

Have you tried this in Vue 3? It could be a bug with effectScope and Vue 2.

As a workaround, you can use mapStores() instead and watch the store or you can ensure the store is instantiated before this.foo is called. This can be achieved by using mapStores() and reading any property from the store before creating the watcher:

export default {
  name: 'App',
  data: () => ({
    color: '#f00',
    swatches: ['#f00', '#ccff00', '#eee', '#0f0'],
  }),
  computed: {
    ...mapState(useStore, ['lol', 'bar']),
    ...mapStores(useStore),
  },
  methods: {
    ...mapActions(useStore, ['setBar']),
  },
  created() {
    this.fooStore.$state // store is instantiated
    this.$watch(
      'lol',
      () => {
        console.log('lol changed')
      },
      { deep: true }
    )
    this.setBar()
  },
}