watchEffect performs bad with emits

[FanetheDivine]

Vue version

3.5.13

Link to minimal reproduction

https://codesandbox.io/p/devbox/vue-test-54xk9s

Steps to reproduce

run the project and open devtool

What is expected?

The number on page is 1. 1 second later it turns to 2 and doesn't change.
An "setup" and an "effect" are printed

What is actually happening?

The number on page is 1. 1 second later it turns to 3, and every 1 second later it grows 2
An "setup" and an "effect", and every 1 second later an "effect" is printed

System Info

Any additional comments?

it seems like emits were collected as watchEffect's dependence

[edison1105]

a workaround

const stop = watchEffect(() => {
  console.log("effect");
  emits("event");
  setTimeout(() => {
    emits("event");
    stop()
  }, 1000);
});

[teleskop150750]

The problem is that during the increment the trigger of the reactive variable is called

vuejs/rfcs#747

workaround

<script setup>
import Child from './Child.vue'
import {ref} from 'vue'

let n = 0
const num = ref(n)
const foo = () => {
    n += 1
    num.value = n 
}
</script>
<template>
    <div>{{num}}
        <Child @event="foo"></Child>
    </div>
</template>