<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="incrementCount">Increment Count</button>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";

const count = ref(0);
const message = ref("Initial Message");

const fetchMessage = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  message.value = `Updated Message after count ${count.value}`;
};

watchEffect(async () => {
  console.log("Effect triggered");
  // Synchronous dependency (tracked)
  console.log("Count:", count.value);

  // Async operation - first await tick
  await fetchMessage();

  // Asynchronous dependency (not tracked in initial sync phase)
  console.log("Message:", message.value);
});

const incrementCount = () => {
  count.value++;
};

const changeMessage = () => {
  message.value = "Manually Changed Message";
};
</script>

<style></style>