[Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript

Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows you how you can watch properties on your class based component and how to use the @Watch decorator for it.

 

<template>
  <div class="hello">
    <button @click="clicked">Click</button> {{sum.acum}}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {Component, Watch} from 'vue-property-decorator'

@Component({
})
export default class Hello extends Vue {

  sum = {
    acum: 0
  }
  @Watch('sum.acum')
  watchCount(newVal, oldVal) {
    console.log("newVal", newVal, "oldVal", oldVal)
  }

  clicked() {
    this.sum.acum++;
  }
}
</script>