Vue.js event to fire after data is updated

Question

I have a Vue.js app of which I have a couple of components for, just to handle some repetitive tasks.

I'm also fetching data from an AJAX request.

What I'd like some input on is if there is an event that fires after Vue data (treeData and flatTreeData) has been updated and actioned so I can perform any additional actions?

var app = new Vue({
    el: 'body',
    data: {
        treeData: {items: {}},
        flatTreeData: [],
    },
});

$.getJSON('./paths.json').done(function(data) {

    // apply the file structure to the vue app
    demo.treeData = data;

    demo.flatTreeData = flattenTree(data);

});

Answer 1

You can use the watch property of the Vue instance to add listeners to variable changes: http://vuejs.org/api/#watch

watch: {
    'treeData': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
}

If you are going to be watching an object like treeData, you may need to use the deep flag to watch the entire object tree.

watch: {
    'treeData':  {
        handler:function (val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
        deep: true
    }
}