I am trying to move some functionality to a vue mixin from the component, to be able to use it in multiple components.

This (simplified version of the code) works:

export default {
  data() {
    return {
      file: {},
      audioPlayer: {
        sourceFile: null,
      },
    };
  },
  watch: {
    'audioPlayer.SourceFile': function (nextFile) {
       console.log('new sourceFile');
       this.$data.file = nextFile;
    },
  }
}

But if I move the audioPlayer data object to a mixin, the watch does no longer fire.

Is this expected behavior?

N.b. I resolved this by directly making the 'file' data property into a computed value, which works in this particular case, but the behavior is still strange.