Vue.js не обновляет DOM с TextTrackCueList

Question

Я хочу перебрать элементы TextTrackCueList, который в основном представляет собой массив заголовков видео HTML5 (для справки: https://developer.mozilla.org/en-US/docs/Web/API/TextTrack#Properties). Вот упрощенный код:

new Vue ({
  el: "#app",
  data() {
    return {
      vid: null,
      track: null,
      cues: []
    }
  },
  mounted() {
    this.vid = this.$refs.vid;
    this.track = this.vid.addTextTrack("captions");
    this.track.mode = "showing";
    this.cues = this.track.cues;
    this.addCue(); //We add just one cue before the list is rendered
  },
  methods: {
    addCue() {
      let i = this.cues.length;
      //The cue just shows during one second
      let cue = new VTTCue(i, i+1, "Caption "+i);
      this.track.addCue(cue);
    }
  }
});

.cues-list {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <video ref="vid" width="50%" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" controls></video>
  <div class="cues-list">
    <ul>
      <li v-for="cue in cues">
        {{ cue.text }}
      </li>
    </ul>
    <button @click="addCue">Add cue</button>
  </div>
</div>

Как мы видим, список cues не обновляется при добавлении новых сигналов.Я подозреваю, что причина в том, что я не использую один из методов мутации, переопределенных Vue.js (https://vuejs.org/v2/guide/list.html#Mutation-Methods),, поэтому DOM не обновляется автоматически. Действительно, я использую TextTrack.addCue() для добавленияcue, а не Array.push(), потому что свойство TextTrack.cues доступно только для чтения. Есть ли обходной путь, например, способ вручную обновить виртуальный DOM?

Спасибо за помощь.

Answer 1

Единственный ответ, который я нашел, состоял в том, чтобы заставить Vue перерисовать:

addCue() {
  let i = this.cues.length;
  //The cue just shows during one second
  let cue = new VTTCue(i, i+1, "Caption "+i);
  this.track.addCue(cue);
  this.$forceUpdate();
}