1. Understanding Computed Properties

• Computed properties are reactive and automatically update when their dependent data changes.
• They are used to perform calculations or derive new values from existing state.
• Computed properties are cached, meaning they only recompute when dependencies change.

Example: Computed Property in Vue.js (Options API)

<template>
  <div>
    <p>Original Price: {{ price }}</p>
    <p>Discounted Price: {{ discountedPrice }}</p>
    <button @click="increasePrice">Increase Price</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 20
    };
  },
  computed: {
    discountedPrice() {
      return this.price - this.discount;
    }
  },
  methods: {
    increasePrice() {
      this.price += 10;
    }
  }
};
</script>

How It Works?

• The discountedPrice is automatically updated whenever price changes.
• The computed property does not recalculate unnecessarily, improving performance.

2. Understanding Watchers (watch)

• Watchers observe changes in specific data properties and run logic when they change.
• Unlike computed properties, watchers are used when performing asynchronous tasks (e.g., API calls, delays).

Example: Using watch in Vue.js (Options API)

<template>
  <div>
    <p>Search Query: {{ query }}</p>
    <input v-model="query" placeholder="Type something..." />
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: ""
    };
  },
  watch: {
    query(newVal) {
      console.log("User searched:", newVal);
    }
  }
};
</script>

How It Works?

• When the user types in the input, the query value updates.
• The watch function logs the new query value every time it changes.

3. Using Computed and Watchers in Composition API

In Vue 3, computed and watch are used inside the setup() function.

Example: Computed Property in Composition API

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    
    const doubleCount = computed(() => count.value * 2);

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

    return { count, doubleCount, increment };
  }
};
</script>

Example: Watcher in Composition API

<template>
  <div>
    <p>Temperature: {{ temperature }}°C</p>
    <button @click="increaseTemp">Increase Temperature</button>
  </div>
</template>

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

export default {
  setup() {
    const temperature = ref(20);

    watch(temperature, (newVal, oldVal) => {
      console.log(`Temperature changed from ${oldVal}°C to ${newVal}°C`);
    });

    const increaseTemp = () => {
      temperature.value++;
    };

    return { temperature, increaseTemp };
  }
};
</script>

4. When to Use Computed vs Watch?