javascriptvue.jsvuejs3watchvue-sfc

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>

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

Solution

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