watcher on async actions not automatically stopped on vue 3.5 (while vue 3.4 works fine)

[natuan62]

Reproduction

source in vue-3.5-pinia-test.zip (sorry i try but still can't config source on a reproduction link)

vue-3.5-pinia-test.zip

Steps to reproduce the bug

I not sure this is vue 3.5 bug or pinia (because vue 3.4 still work fine)

• npm install
• npm run dev

store.ts

import { defineStore } from 'pinia';
import { computed, watch } from 'vue';

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export const useDesignStore = defineStore('designEditorStore', {
  state: () => ({
    designId: 0,
  }),
  actions: {
    async init() {
      const design = computed(() => this.router.currentRoute.value.params.designId as string);

      await sleep(1000);

      watch(design, () => {
        console.log('14 watch', design.value);
        this.designId = Number(design.value);
      });
    },
  },
});

// router file

import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';
import Home from '../components/Home.vue';

const routes = [
  { path: '/design/:designId', component: HelloWorld, name: 'Design' },
  { path: '/home', component: Home, name: 'Home' },
  { path: '/', component: Home, name: 'Home' },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...routes],
});

export default router;

App.vue

<template>
  <button @click="goDesign()">go design</button>
  <router-view />
</template>

<script>
import { useDesignStore } from './store';
import HelloWorld from './components/HelloWorld.vue';
import { useRouter } from 'vue-router';
import router from './router';
export default {
  components: {
    HelloWorld,
  },
  setup() {
    const router = useRouter();

    const goDesign = (num) => {
      router.push({ name: 'Design', params: { designId: 0 } });
    };

    return {
      goDesign,
    };
  },
};
</script>

HelloWorld.vue

<template>
  <button @click="goHome()" style="margin: 5px">out</button>
  <p>HelloWorld</p>
  <div v-for="item in designIds" :key="item" style="margin: 5px">
    <button @click="viewDesign(item)">Design {{ item }}</button>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs, onUnmounted, watch, computed } from 'vue';
import { useDesignStore } from '../store';
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const designIds = [1, 2];
    const useStore = useDesignStore();

    const design = computed(() => router.currentRoute.value.params.designId);

    const viewDesign = (id) => {
      router.push({ name: 'Design', params: { designId: id } });
    };

    const goHome = () => {
      router.push({ name: 'Home' });
    };

    onMounted(async () => {
      console.log('35 onMounted HelloWorld');
      await useStore.init();
    });
    onUnmounted(() => {
      console.log('40 onUnmounted HelloWorld');
    });

    return {
      designIds,
      viewDesign,
      goHome,
    };
  },
};
</script>

vue-3.5-pinia-test.zip

Expected behavior

• watch not trigger many times like this demo

Actual behavior

• watch trigger many times when mount component

Additional information

demo.pinia.mp4

[natuan62]

Hi @posva if i moved watch to up, it works fine

async init() {
      const design = computed(() => this.router.currentRoute.value.params.designId as string);

      watch(design, () => {
        console.log('14 watch', design.value);
        this.designId = Number(design.value);
      });

     await sleep(1000);
    },