I recently attempted to refactor some code by moving certain functionalities to a vue mixin from the component itself, with the intention of reusing it in multiple components.
The simplified version of the code looks like this:
export default {
data() {
return {
file: {},
audioPlayer: {
sourceFile: null,
},
};
},
watch: {
'audioPlayer.SourceFile': function (nextFile) {
console.log('new sourceFile');
this.$data.file = nextFile;
},
}
}
However, when I moved the audioPlayer data object to a mixin, the watch functionality stopped working. This was quite unexpected for me.
Has anyone else experienced this issue before?
As a quick workaround, I turned the 'file' data property into a computed value directly, which solved the problem temporarily. But the underlying behavior is still puzzling to me.