[rc.5] recursive loop with watch stop handle

[cexbrayat]

Version

3.0.0-rc.5

Reproduction link

cexbrayat/vite-playground#1

Steps to reproduce

Setup a component that is just:

• displaying a price
• recording price changes with a watcher
• after 3 seconds we stop recording by calling the WatchStopHandle returned by watchEffect

In rc.4 this works fine.
In rc.5, it goes into a recursive loop.

  setup() {
    const price = ref(10);

    const history = ref<Array<string>>([]);
    const stopRecording = watchEffect(() => {
      history.value.push(`Price changed to ${price.value}`);
    });

    // stop recording after 3 seconds
    setTimeout(() => {
      stopRecording();
    }, 3000);

    return { price, history };
  }

What is expected?

This should just print Price changed to 10 once, as we stop recording and never update the price (it does in rc.4)

What is actually happening?

it displays Price changed to 10 a lot of times , and then throws:

Uncaught (in promise) Error: Maximum recursive updates exceeded. You may have code that is mutating state in your component's render function or updated hook or watcher source function.