Version

3.0.7

Reproduction link

https://codesandbox.io/s/inspiring-almeida-rlncv?file=/src/main.js

Steps to reproduce

export const App = defineComponent({
  setup() {
    const a = ref(0);
    const b = ref(1);
    watchEffect(() => {
      console.log('watched');
      b.value = a.value   1;
    });
    return () => {
      console.log('start render');
      return <button onClick={() => a.value  }> {a.value   b.value}</button>;
    }
  }
})```
1. Click the button in the page.
2. check browser console

### What is expected?
After click, the component only render for one time.

### What is actually happening?
After click, the component rendered twice. That is:
the console say: 
watched
start render
start render

---
I know using `computed` will resolve the problem. However I think this is a bug for `watchEffect`, the watched resource actually runs before the render triggered by `a.value`, it should not trigger another render again.

<!-- generated by vue-issues. DO NOT REMOVE -->

Using flush: 'sync' could avoid multiple renders