[Vuejs]-Vue 3 watchEffect dependency tracking after asynchronous code

default effect of watchEffect is pre which means in sequence of changes it will call first and last

• watchEffect calls itself for the first time and since it is pre it will run immediately
• state.count++ is called and watchEffect notices the change
• state.name = '...' is called but watchEffect doesn’t care
• end main task
• watchEffect sees the change complete it calls the last time of the reaction cycle as pre

why console.log(Name :…) runs twice in a row is due to the nature of the asynchronous function being put into a separate task you can refer to elsewhere

to make watchEffect call only once in the react cycle add { flush: 'post' }