Inconsistent execution order of Sync Watchers on computed property

[serkodev]

Vue version

3.4.37

Link to minimal reproduction

https://play.vuejs.org/#eNqVkktr20AQx7/KsBQsYyEH0lJwZdMHObSHtLQ9LiTKamRvspoV+1AcjL57Rqs4ySEYctFq5/Gf38zsQXzruqKPKFai9MrpLoDHELuNJN121gU4gMMmB2XbLgasc7ivgtrBAI2zLcw4dyZJkrLkAxCsx/DsbC6psQ4ygwE0G8++8FHCJz4WizkcJMGTUEY5ZP0c1pvJClyKvDVYGLuF7Jog+3DQw/w6h55VAYacmRoT/W4FM/9AagYDO4YXipH1kosembMsyVPRVybiO9CS0Gm8qdY7EJtIKmhLUNU1cyXRJ7LFIsWUy2kTvAO+BGw7UwXkG0B5E0Pg3K/KaHW3loJFpNjwt1xOLg4rl69yRC6CZ+RGb4tbb4kXnUpKMZJrg+53N+J4KVbHDlnWGHv/K9mCi5gf7WqH6u4N+63fjzYp/jj06HqU4tkXKrfFMLkv/l3inv+fna2to+HoE86/yOOOI+MU9j1Szdiv4hLtz/RcNW3/+4t9QPLHpkbQaSlT3/xif5xo/QX3vPiY8ngpPMWrHt2oyQNkR3H+WQyPZ0UK3A==

Steps to reproduce

When using Vue’s watch function with the { flush: 'sync' } option, I’ve observed different behaviors in the callback execution order depending on whether the watcher is observing a ref or a computed property.

Watching a ref:

If there are 5 sync watchers observing the same ref, the execution order of their callbacks is consistent and sequential, as expected.

const n = ref(0)

for (let i = 0; i < 5; i++) {
  watch(n, (v) => {
    console.log(`n (${i})`, v)
  }, { flush: 'sync' })
}
n.value++

Output

n (0) 1
n (1) 1
n (2) 1
n (3) 1
n (4) 1

Watching a computed:

However, if the watchers observe a computed property derived from the same ref, the execution order of the callbacks changes. The first watcher in the loop is executed last.

const n = ref(0)
const compN = computed(() => n.value)

for (let i = 0; i < 5; i++) {
  watch(compN, (v) => {
    console.log(`compN (${i})`, v)
  }, { flush: 'sync' })
}
n.value++

Output

compN (1) 1
compN (2) 1
compN (3) 1
compN (4) 1
compN (0) 1 <-

What is expected?

Output

compN (0) 1 <-
compN (1) 1
compN (2) 1
compN (3) 1
compN (4) 1

System Info

No response

Any additional comments?

I couldn't find documentation in Vue's official resources explaining the guaranteed execution order of sync watchers. Is the callback execution order for sync watchers is supposed to be guaranteed, or if the observed behavior with computed properties is unintended?

NOTE: the normal Watchers (without sync options) works as expected and trigger in order that they are defined.

---

Update: After version 3.5.0-alpha.1, I noticed that the Sync Watchers for ref and computed both ensure that the callbacks are executed in the order of LIFO, Is this guarantee intentional?

[Disservin]

I think watchers are supposed to be called in the order that they are defined,
I think it shouldnt matter what they are watching, a ref or a computed,nor should it matter if they are defined as sync.

#7576

[serkodev]

If so, after 3.5.0-alpha.1 (maybe related to #10501), is the trigger order of Sync Watcher is wrong? It's like LIFO instead of FIFO.

compN (4) 1
compN (3) 1
compN (2) 1
compN (1) 1
compN (0) 1
n (4) 1
n (3) 1
n (2) 1
n (1) 1
n (0) 1

v3.5.0: Playground

[Disservin]

Also with the behaviour prior to 3.5.0
there is this behaviour which also look wrong? the first watcher is at the end and rest are sequential?

compN (1)
compN (2)
compN (3)
compN (4)
compN (0)

[serkodev]

Yes, it has already mentioned in this issue content.