title: Watch for data change
body: <p>I'm currently struggling with the Vue instance concept.
  I'm using the vue-loader with webpack and created a vue component that I'm importing.</p>
  
  <pre><code>import Vue from 'vue';
  import Search from '../Search.vue';
  const vm = new Vue({
     el: 'search',
     render: h =&gt; h(search)
  });
  </code></pre>
  
  <p>On the component: </p>
  
  <pre><code>export default {
      data: function() {
          return {
              results: 'current results'
          }
      }
  }
  </code></pre>
  
  <p>I want trigger and event from inside of the component (on a property change) that I can watch from the instance.</p>
  
  <p>Using the API should be something like this:</p>
  
  <pre><code>vm.$watch('results', function (newVal, oldVal) {
    // do something
  })
  </code></pre>
  
  <p>But I does not trigger anything. </p>
  
  <p>I think I'm missing to understand how to use the Vue instance because I can't also add any data on initialization of the instance that is accessible on the component like:</p>
  
  <pre><code>const vm = new Vue({
     el: 'search',
     data: {index: 1},
     render: h =&gt; h(search)
  });
  </code></pre>
  
  <p>Index is also not available inside of the component to use.</p>
  
  <p>How do I fix this?</p>