title: Vue watch unexpectedly called twice
body: <p><strong>udpate #2:</strong> It is not a bug, it was my own fault. I extended the <code>BaseComponent</code> by a <code>extend()</code> method as well as putting <code>extends: BaseComponent</code> into the options. I thought I needed both, but <code>extends: BaseComponent</code> in the options seems to be enough.<br>
  So the double "extend" has apparently duplicated the watcher which lead to the strange behavior I documented in my question.  </p>
  
  <p><strong>update:</strong> I found out what causes this problem: The watcher seems to be duplicated, because it's in a <code>BaseComponent</code> which is extended by the <code>Component</code> which is used in my example.
  so <code>export default BaseComponent.extend({ name: 'Component', ...})</code> seems to duplicate the <code>watch</code> object instead of "merging" it - there is now one in the <code>BaseComponent</code> (where it is implemented initially) and one in the <code>Component</code> - and of course both react to prop-updates.<br>
  This seems to be a bug IMHO.</p>
  
  <hr>
  
  <p>Using <code>vue-cli</code> with single file components.<br>
  I am setting a prop in one component via a method:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;other-component :my-object="myObject" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default (Vue as VueConstructor).extend({
      data() {
        return {
          myObject: null
        }
      },
  
      methods: {
        actionButtonClicked(action, ID) {
          console.log('actionButtonClicked');
  
          this.myObject = {
            action: action,
            ID: ID
          }
        }
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>then I am watching the prop in the other component with a watcher - but watch gets called twice on every execution of the method.</p>
  
  <pre><code>&lt;script&gt;
  
    export default (Vue as VueConstructor&lt;Vue&gt;).extend({
      /* ... */
      props: {
        myObject: {
        type: Object,
        default: null
      },
  
      watch: {
        'myObject.ID'(value, oldValue) {
          console.log('watcher executed');
        }
      }
  
      /* ... */
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>so in the console i get the output: </p>
  
  <pre><code>actionButtonClicked
  watcher executed
  watcher executed
  </code></pre>
  
  <p>.. every time the method gets called. </p>
  
  <p>I already tried all different variants of watchers - for example with <code>deep: true</code> + <code>handler</code>. but this all didn't change anything about the watcher being called twice. </p>