How to watch props in Vue.js

In this tutorial, you’ll learn how to watch props for changes in Vue.js.

When you pass data as a prop to a component it will be updated reactively. But if you need to call a method or perform some other actions on prop changes this code will help you.

var vm = new Vue({
  el: '#demo',
  props: ['yourProp'],
  data: {
    yourPropChanged: false
  },
  watch: {
    yourProp (val, oldVal) {
      if (val !== oldVal) this.yourPropChanged = true
    }
  }
})

If the yourProp changes, the yourPropChanged property will become true.

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-watch-props

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, where to put variables in Vue.js components, how to deploy Vue.js app to Firebase hosting.