Vue 3: Why variable watcher doesn’t work correctly?

I have like this code in my project:

<script setup>
import { ref, watch } from 'vue'

const num = ref(null)

// Some condition
if(true) {
  // Doesn't works. Why?
  num.value = 1

  // Works
  //setTimeout(() => {
  //  num.value = 2
  //})
}
// Simple watcher  
watch(num, (newVal, oldVal) => {
  console.log("Num changed to: ", newVal)
})
</script>

JavaScript
​x
 
<script setup>
import { ref, watch } from 'vue'
​
const num = ref(null)
​
// Some condition
if(true) {
  // Doesn't works. Why?
  num.value = 1
​
  // Works
  //setTimeout(() => {
  //  num.value = 2
  //})
}
// Simple watcher  
watch(num, (newVal, oldVal) => {
  console.log("Num changed to: ", newVal)
})
</script>
​

My watcher doesn’t work when I set num.value = 1. How I can fix this to work? But when I run with setTimeout it’s work

Demo project here

Answer

You add the watcher after you set it to 1, so there is no chance for it to catch it.

Advertisement

Answer