Vue.js 使用音阶和弦API的Vue组件赢得'；当我更改值时不会更新

所以我尝试使用Scales chords API在我的网页上显示一组和弦。 以下是API的链接： 我正在为我的网页使用一个Vue组件，并使用一个b-list-group来运行我的阵列并显示数据。它在第一次加载时工作得很好，但是，当我将数组更改为其他内容时，Scales-Chords-API元素就消失了。我已经确认数组正在更改为它应该更改的内容，但vue似乎无法用不同的值重新排列这些元素。以下是我的b-list-group元素代码：

    <b-list-group-item :style="myStyle"
      v-for="(c, i) in chords"
      :key="i">
      <ins class="scales_chords_api" :chord="c" instrument="piano"></ins>
        <ins  class="scales_chords_api" :chord="c" instrument="piano" output="sound"></ins> 
         <br>
        <input type="checkbox" id="chordCheck" name="chordCheck" value="chordCheck">
        <label for="chordCheck"> {{c}}</label><br>
    </b-list-group-item>
  </b-list-group>

{{c}}

重新提交此数据的最佳方式是什么？我尝试过使用这个。$forceUpdate（），以及向vue组件添加一个键，并在每次更新数组时递增该键。我真的不知道还有什么可以尝试的，但是如果有其他方法可以完全重新加载组件，我愿意尝试。另外，当我更改数组时，复选框上的标签会正确更新，这也不值得