<template>
  <div>
    <h1>Search Example</h1>
    <input v-model="searchQuery" placeholder="Type something..." />
    <p>Searching for: {{ searchQuery }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  watch: {
    searchQuery(newQuery, oldQuery) {
      console.log(`Search changed from "${oldQuery}" to "${newQuery}"`);
    }
  }
};
</script>

  Search changed from "" to "Vue.js"

<template>
  <div>
    <h1>Price Calculator</h1>
    <input type="number" v-model="price" placeholder="Enter price" />
    <input type="number" v-model="quantity" placeholder="Enter quantity" />
    <p>Total: {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0,
      quantity: 0,
      total: 0
    };
  },
  watch: {
    price() {
      this.calculateTotal();
    },
    quantity() {
      this.calculateTotal();
    }
  },
  methods: {
    calculateTotal() {
      this.total = this.price * this.quantity;
    }
  }
};
</script>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  watch: {
    name: {
      handler(newName) {
        console.log(`Name updated to: ${newName}`);
      },
      immediate: true
    }
  }
};
</script>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    user: {
      handler(newUser) {
        console.log('User data updated:', newUser);
      },
      deep: true
    }
  }
};
</script>

<template>
  <div>
    <h1>Search API</h1>
    <input v-model="query" placeholder="Search..." />
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      result: ''
    };
  },
  watch: {
    query: {
      handler(newQuery) {
        this.fetchData(newQuery);
      },
      immediate: true
    }
  },
  methods: {
    fetchData(query) {
      if (query) {
        // จำลองการเรียก API
        this.result = `Results for "${query}"`;
      } else {
        this.result = '';
      }
    }
  }
};
</script>