# Watch

It is tempting to overuse watch, it is often a better idea to use a computed property. Watch is most useful when you want to perform asynchronous in response to changing data.

"Watchers are incredibly good for executing logic that applies to something else when a change on a property occurs" - Chris Fritz

# Input:

<template>
  <div>
    <button @click="counter++">Increase</button>
    <p>{{ counter }} big cats</p>
    <p>Carole's Opinion : "{{ opinion }}"</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      counter: 101,
      opinion: 'That is perfect.'
    }
  },
  watch: {
    counter: function(counter) {
      var vm = this
      vm.opinion = 'Loading...'
      // setTimemout to
      setTimeout(function() {
        vm.counter = 101
        vm.opinion = 'No, 101 is better'
      }, 1000)
    }
  }
}
</script>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Output:

101 big cats

Carole's Opinion : "That is perfect."

See the official Vue.js doc

← Computed Properties Bind HTML attributes / v-bind →