Is it possible to trigger a function upon a Vue data element change?

Question

My API provides me a hash which I receive as part of an AJAX call. The content of the AJAX response (which includes the hash) is updating data components in my Vue instance (so that the DOM is modified, per usual Vue usage).

I was wondering if it is possible to trigger (run) a function upon the change of a specific data element. Reactivity in Depth does not mention this and for me (please correct me if this is wrong) computedand methods are a way to indirectly provide new computed elements for the DOM (in other words, they do not start because a specific element was modified but are rather synchronisation methods between data and other variables provided to the DOM).

I was hoping for something along the lines of (this is non-working, incorrect pseudo-code, I just add it to put in context of a Vue instance):

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    functions_to_trigger_upon_an_element_change: {
      hash: function () {
        location.reload()
      }
    }
  })

The idea above would be to have location.reload() run when the value of hash changes.

Is there such a mechanism in Vue?

If there is not, I will keep the state independently of Vue and act accordingly upon its change but it would be nice to reuse the Vue watch properties to do that.

Answer 1

You can use a watch, like the following example:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

About your case, here is the example about how it could be implemented.

var vm = new Vue({
  el: '#demo',
  data: {
    hash: 'Foo' 
  },
  watch: {
    hash: function (val) {
      // when the hash prop changes, this function will be fired.
      location.reload()
    } 
  }
})

I hope I understood your question right.

Answer 2

I think this should work

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })