vue-js. watch doesn't work when data is changed

Question

I'm new to vue.js. But I have trouble with data binding and re-rendering. Combining socket-io and vue-chartjsm I've faced the issue about rendering.

I intended to change data via generateData(), which seemed to be working. And I expected to watch: would work but it didn't.

I think I misunderstand some concepts. Could you please let me know what's wrong with my idea?

App.vue

(...)
export default {
  name: "App",
  components: {
    ReactiveBarChart
  },
  data() {
    return {
      chartData: null,
      originalData: null
    };
  },
  watch: {
    originalData: function(data) {
      console.log(data)
      // not triggered after generateData() is called
    }
  },
  methods: {
    generateData() {
      let changeArray = [];
      changeArray = this.originalData;
      changeArray[0] = 20;
      this.originalData = changeArray;
      console.log("data :", this.originalData)
      // logged properly with [20, .....]
    },
(...)

Answer 1

Try to declare originalData as an empty array and to push() your values to the empty array. Your code could look something like:

export default {
  data() {
    return {
      chartData: null,
      originalData: []
    };
  },
  watch: {
    originalData: function(data) {
      console.log(data)
    }
  },
  methods: {
    generateData() {
      let changeArray = [];
      changeArray = this.originalData;
      changeArray.push(20);
      this.originalData = changeArray;
      console.log("data :", this.originalData)
    }
  }
}

If you expecifically want to change the array value on the first position use splice(0,1,20) instead of push(20)

You can read more helpful information about Array Methods