audioタグの各ファイルの音声をjsを使って再生させる（nuxt.js）

audioタグのjsを使った再生を、記事等を参考に実装中。

問題

audioタグ（id="bgm1"）を取得してplayメソッドで再生しているが、複数ファイルあるうちの、一番最初のファイルの音声しか流せない（動画添付）
audioタグ（id="bgm1"）を取得してfar playとfar pauseを変更しているため、上記と同様一番最初のaudioタグの上に乗っているフォントが変更される = 全ての音声ファイル表示が変更されてしまう

現在コード

      <div class="content" v-for="(item, index) in items" :key="index" @click="setMusicFileData(item.title, item.cover_image, item.music_file, item.user_name, item.user_id, item.id)">
      <NuxtLink to="/musicfiledetail">
        <div>
            <img :src="`${$axios.defaults.baseURL}storage/${item.cover_image}`" class="cover-image">
            <h3>{{ item.title }}</h3>
            <audio id="bgm1" preload>
              <source
                :src="`${$axios.defaults.baseURL}storage/${item.music_file}`"
                type="audio/mp3"
              >
            </audio>
        </div>
      </NuxtLink>
            <button v-if="!play" @click="playAction(item.music_file)" id="btn-play" type="button"><font-awesome-icon :icon="['fas', 'play']"/></button>
            <button v-else @click="pauseAction(item.music_file)" id="btn-play" type="button"><font-awesome-icon :icon="['fas', 'pause']"/></button>
      </div>

<script>
  methods: {
    playAction (mp3File) {
      this.play = true
      const bgm1 = document.querySelector("#bgm1");       // <audio>
      bgm1.play();
    },
    pauseAction (mp3File) {
      this.play = false
      const bgm1 = document.querySelector("#bgm1");       // <audio>
      bgm1.pause();
    },

仮説

下記の記事でaudioタグの配列を使って、と思ったのですが、自分の場合、audioタグが複数あるのではなく、dbのデータで複数表示させている状態で、難しいと考えています。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10184554060

v-forで要素を回した時、audioタグのidが全て“bgm1”になってしまっている？
idを動的に生成して付与を試す。
以下の記事が参考
https://www.ryotaku.com/entry/2019/09/19/000000?utm_source=feed