Tips Use Vue 3 Watch

Yes! Di kode ini:

js
watch(() => isShowCashflowModal, (val) => {
  if (val) {
    setTimeout(() => {
      console.log("focuskan ke input search");
      focusStore.pos = "search";
    }, 2000);
  }
})

Kelihatannya intensinya benar, tapi ada satu hal krusial yang sering jadi jebakan di Vue:

---

⚠️ Kesalahan: watch(() => isShowCashflowModal, ...)

Kamu men-watch fungsi yang mengembalikan fungsi, bukan nilainya.

Kalau isShowCashflowModal itu ref (misalnya const isShowCashflowModal = ref(false)), maka kamu harus me-watch nilai aktualnya pakai:

js
watch(isShowCashflowModal, (val) => {
  if (val) {
    setTimeout(() => {
      console.log("focuskan ke input search");
      focusStore.pos = "search";
    }, 2000);
  }
});

✅ Penjelasan

• watch(() => isShowCashflowModal) berarti kamu me-watch fungsinya, bukan nilainya.

• Kalau isShowCashflowModal adalah ref, Vue udah cukup pintar buat detect perubahannya langsung dengan watch(isShowCashflowModal, ...).

---

🔍 Kalau dia props?

Kalau isShowCashflowModal itu dari props, misal:

js
const props = defineProps({
  isShowCashflowModal: Boolean
});

Maka kamu harus tetap bungkus dengan getter agar reactive:

js
watch(() => props.isShowCashflowModal, (val) => {
  if (val) {
    setTimeout(() => {
      console.log("focuskan ke input search");
      focusStore.pos = "search";
    }, 2000);
  }
});

---

🔧 Tips: Gunakan flush: 'post' kalau perlu tunggu DOM update

js
watch(isShowCashflowModal, (val) => {
  if (val) {
    setTimeout(() => {
      focusStore.pos = "search";
    }, 2000);
  }
}, { flush: 'post' });

---

Coba pastikan apakah isShowCashflowModal itu:

• ref → pakai langsung watch(isShowCashflowModal, ...)

• props → pakai watch(() => props.isShowCashflowModal, ...)

Kalau kamu masih bingung, kasih tahu aku konteks isShowCashflowModal itu ref atau prop ya.