flush: 'sync' option of watchEffect is inconsistent with the behavior of Vue 3

[John60676]

Description

In composition-api, account change will not trigger this watch, when flush: 'sync' option is set,
but Vue 3 will trigger this watch.

setup() {
  const account = ref("John")
  const name = ref("")

  watchEffect(
    () => {
      name.value = account.value
      // in Vue 3, `account` change will trigger this watch, 
      // but in composition-api it will not
      console.log("watch")  
    },
    {
      flush: "sync",
    }
  )
  return { account, name }
}

Reproduce

Vue 2 demo: https://codesandbox.io/s/vue2-watcheffect-yebvl?file=/src/App.vue

Vue 3 demo: https://codesandbox.io/s/vue3-watcheffect-jy20t?file=/src/App.vue

[ygj6]

This PR #724 could solve the issue, but it's not the best solution.

[sunyanzhe]

I think the reason for this problem is this：

composition-api/src/reactivity/reactive.ts

Line 97 in 9566e63

const value = getter ? getter.call(target) : val

When observe is executed, target will change to accessor mode.
Target must have getter/setter.
When the setter is triggered, getter.call(target) will collect dependencies.
That's why dependencies are collected despite assignment

I know this code is to avoid the data that is originally accessors, but this logic already exists in defineReactive, why repeat implementation.

sorry for the bad English

[ygj6]

Has been solved by #786.