# 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>
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
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."