Watch for variable change do not work

Question

I need to check variable rasters_previews_list for changing. Here is my code:

var userContent = Vue.extend({
  template: '<p>Some template</p>',
  data: function ()  {
    return {
      rasters_previews_list: []
    }
  },
  watch: {
    'rasters_previews_list': function(value, mutation) {
      console.log("Value changed");      
    }
  }
});

But In console I do not see Value changed when it got new data.

Data changing function:

map.on('draw:created', function (e) {
//...

   Vue.http.post('/dbdata', DataBody).then((response) => {
      userContent.rasters_previews_list = response; // putting JSON answer to Component data in userContent

      console.log(response);


      }, (response) => {
          console.log("Can't get list rasters metadata from DB. Server error: ", response.status)
      });

I change value in map.on('draw:created', function (e) (Leaflet JS). I see console.log output, so seems data is changing.

Answer 1

If you want to change the value of an array you will have to use the special Array extension methods Vue.set and Vue.delete.

Due to limitations of JavaScript, Vue cannot detect the following changes to an Array:

• When you directly set an item with the index, e.g. vm.items[0] = {};

• When you modify the length of the Array, e.g. vm.items.length = 0.

https://vuejs.org/api/#Vue-set

This problem is also mentioned in the common gotchas

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is just syntax sugar for arr.splice(index, 1, value).