title: Vue.js $watch Not Working
body: <p>First, I have a Vue JS file --</p>
  
  <pre><code>export var myVue = new Vue({
      el: '#myApp',
      data: {
         myCoordinates: new Set() // simple integers
      },
      methods: {
          addCoordinates (c) {
              this.myCoordinates.add(c);
          }
      }
  }
  </code></pre>
  
  <p>Then I have a another JS file that imports the Vue and does some plotting --</p>
  
  <pre><code>import { myVue } from './my_vue.js';
  
  myVue.addCoordinates(42);
  
  myVue.$watch('myCoordinates', function(newVal, oldVal) {
      console.log(newVal);
      // plot the new coordinates
  }, { deep: true });
  </code></pre>
  
  <p>The problem is the <code>myVue.$watch</code> does not fire -- I can see <code>myCoordinates</code> updated properly in Vue dev console, but <code>myVue.$watch</code> just doesn't get trigggered. And I can't test watch as Vue's native as I can't move the plotting part into <code>myVue</code> due to various restrictions.</p>
  
  <p>The question is: What could have gone wrong in my case?</p>
  
  <p>Edit: BTW, I'm using Webpack 4 to combine both JS files, would that have any side-effect?</p>