Как осуществляется слежение за свойствами в Vue.js?

В плане если у меня есть какое то свойство, при изменении которого должно что то произойти, как такое реализовать? Что то типа onchange на определенном свойстве)

Есть такая штука как watch, она часто полезная, но в основном когда речь идет о больших каких то участках, вот есть пример, с использованием watch:

var vm = new Vue({
el: '#test',
data: {
worker_1:0,
worker_2:0,
worker_3:0,
worker_4:0,
generalSal:0
},
watch: {
worker_1: function () {
this.generalSal = parseInt(this.worker_1) parseInt(this.worker_2) parseInt(this.worker_3) parseInt(this.worker_4)
}
,
worker_2: function () {
this.generalSal = parseInt(this.worker_1) parseInt(this.worker_2) parseInt(this.worker_3) parseInt(this.worker_4)
}
,
worker_3: function () {
this.generalSal = parseInt(this.worker_1) parseInt(this.worker_2) parseInt(this.worker_3) parseInt(this.worker_4)
}
,
worker_4: function () {
this.generalSal = parseInt(this.worker_1) parseInt(this.worker_2) parseInt(this.worker_3) parseInt(this.worker_4)
}
,
}
})

На самом деле тут всё можно было написать значительно проще, можно было просто создать одно вычисляемое свойство generalSal которое просто возвращало бы сумму всех полей, это как раз тот случай когда watch лучше не использовать, в этом примере мы делаем какие либо изменения в зависимости от изменения этих четырех свойств, если использовать вычисляемые свойства, то они сами по себе изменяются как только один из участников вычисляемого свойства изменяет свое значение.

<div id="test">
Input workers salary
<input
type="text" v-model.lazy="worker_1">
<input
type="text" v-model.lazy="worker_2">
<input
type="text" v-model.lazy="worker_3">
<input
type="text" v-model.lazy="worker_4">


{{worker_1}}
{{worker_2}}
{{worker_3}}
{{worker_4}}

General sum of all salaries: {{generalSal}}$

Html код куда мы транслируем изменения и наблюдаем за результатами.

А вот так лучше было бы переписать vue екземпляру кучу watch на одно вычисляемое свойство:

var vm = new Vue({
el: '#test',
data: {
worker_1:0,
worker_2:0,
worker_3:0,
worker_4:0
},
computed: {
generalSal: function () {
return parseInt(this.worker_1) parseInt(this.worker_2) parseInt(this.worker_3) parseInt(this.worker_4)

}
}
,
})

И короче, и эффективнее)