Vue.js 如何“计算”外部文件？

在main.js中：

import player from './package/Player';

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

和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;
      }
    }
  });
}

和应用程序内：

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

这很好，但是当player.js中的参数改变时，app.vue中的参数没有改变。如何解决这个问题？ 例如，当我单击app.vue中的按钮时，在控制台中我可以看到：
真假
假-真
真假
等等

所以，这意味着信息正在改变，但如何检查呢

我也试着用vuex来做，但在那里我们只能存储信息，但我需要转换它，所以vuex不是一个好主意

因此，有一个问题：

---

如何检查外部文件中的一些信息？

一种简单的方法是为

isplay

变量使用

Vue

实例，使其响应：

let isPlaying = new Vue({
  data: {
    status: true
  }
});

以下是JSFIDLE：