Defining watcher in a mixin results in having multiple instances of the same watcher

[kamilbeben]

Hi!

According to the documentation, this is how we should use mixins

@Component({
  watch: {
    testMixinProperty (newValue, oldValue) {}
  }
})
class TestMixin extends Vue {
  testMixinProperty = 'abc'
}

@Component({
  template: `
  <div>
    {{ testMixinProperty }}
    $options.watch.testMixinProperty.length: {{ $options.watch.testMixinProperty.length }}
  </div>
  `
})
class App extends mixins(TestMixin) { }

The problem is, App component now have two watchers of testMixinProperty. Am i doing something wrong or maybe this is the intended behavior?

vue-class-component version: 7.2.6 vue version: 2.6.11 jsfiddle bug reproduction

[kamilbeben]

Sorry about that, i've been playing with the fiddle some more and it turns out that this behavior has nothing to do with vue-class-component because the code below results in the same thing

var TestMixin = {
  data () {
    return {
      testMixinProperty: 'abc'
    }
  },
  watch: {
    testMixinProperty (newValue, oldValue) {}
  }
}

var App = Vue.extend({
  mixins: [TestMixin],
  template: `
    <div>
      {{ testMixinProperty }}
      $options.watch.testMixinProperty.length: {{ $options.watch.testMixinProperty.length }}
    </div>
  `
})

I'm going to close this issue now.