How to pass event to application?

Question

JavaScript

In main.js:

import player from './package/Player';

Vue.use(player);
...
new Vue({
  el: '#app',
  player,

and in player.js:

export default function (Vue) {
  let isPlaying = true;

  Vue.player = {
    changePlaying(){
      let before = isPlaying;
      isPlaying = !isPlaying;
      let after = isPlaying;

      console.log(before, after);
    },
    getPlaying(){
      return isPlaying;
    }
  };
  Object.defineProperties(Vue.prototype, {
    $player:{
      get: () => {
        return Vue.player;
      }
    }
  });
}

and in App:

computed:{
      player(){
          return this.$player.getPlaying();
      }
  },

It works, but only on the first run. How can I make the component "listen" to an external file?
At the moment, if you press the button in the component, then the following is displayed in the console:

true false
false true
true false

Those. Everything seems to work, but the component does not listen to the file. How to deal with this?

Answer 1

Try like this

export default function (Vue) {

  Vue.player = {
    isPlaying: true;
    changePlaying(){
      let before = this.isPlaying;
      this.isPlaying = !this.isPlaying;
      let after = this.isPlaying;

      console.log(before, after);
    },
  };