title: vue-js. watch doesn't work when data is changed
body: <p>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. </p>
  
  <p>I intended to change data via <code>generateData()</code>, which seemed to be working. And I expected to <code>watch:</code> would work but it didn't. </p>
  
  <p>I think I misunderstand some concepts. Could you please let me know what's wrong with my idea?</p>
  
  <p>App.vue</p>
  
  <pre><code>(...)
  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, .....]
      },
  (...)
  </code></pre>