Compiled Runtime Ordering of Watchers in Vue 3 - vue.js

Question

So, let's hypothetically say I have the following setup:
<script setup lang="ts">
const someRef = ref<null | string>(null)
const setSomeRef = (v: string) => {
someRef.value = v
}
const watcher1 = watch(someRef, () => {
doSomething()
})
const watcher2 = watch(someRef, () => {
doSomethingElse()
})
</script>
<template>
<button #click="setSomeRef("Hello!")">Hit Me!</button>
</template>
Let's also just hypothetically imagine that these two watchers might be in two different composables, but maybe instantiated on the same component ... for reasons.
A user clicks the button.
My thought is, which function fires first? doSomething() or `doSomethingElse()?
Do they always fire in the same order? ... and does it matter if the side effects are unrelated, i.e., is the perceived difference negligible?

Answer 1

Seems like this should not be a concern in JavaScript. And you are proberbly doing something wrong, if you need this. You need more control and predictability than this.
I did a very small test, that might help you.
Seems like the code runs synchronous (as expected in JavaScript) with less than .3 milliseconds in between (on my machine).
Test in Playground
<script setup lang="ts">
import {ref, watch} from 'vue'
const test = ref([])
const someRef = ref(0)
const setSomeRef = () => {
someRef.value++
}
const watcher1 = watch(someRef, () => {
test.value.push("1: " + window.performance.now())
console.log("1: ", window.performance.now())
})
const watcher2 = watch(someRef, () => {
test.value.push("2: " + window.performance.now())
console.log("2: ", window.performance.now())
})
</script>
<template>
<button #click="setSomeRef()">Hit Me!</button>
<div v-for="i in test">
{{i}}
</div>
</template>