[Vuejs]-Plyr and vue.js: accessing the video duration by a computed property

If you are using vue-plyr, you can access duration by @timeupdate event

<template>
  <div id="app">
     <div>Duration: {{ duration }}</div>
        <plyr @timeupdate="videoTimeUpdated" :emit="['timeupdate']" ref="player">
          <video>
              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
          </video>
      </plyr>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      duration: null,
      player: null
    };
  },
  components: {},
  mounted() {
    this.player = this.$refs.player.player;
  },
  methods: {
    videoTimeUpdated: function(event) {
      this.duration = this.player.currentTime;
    }
  }
};
</script>

You can check my demo at https://codesandbox.io/s/6y7r8zk8ow