[Vuejs]-Audio is blocked for 'autoplay' after clicking play?

You need to pass the event to this.togglePlay. The event has to exist in the context of the calling function otherwise it won’t know that it was triggered by the user.

Try this

<template>
  <div class="container">
      <button
          type="button"
          @click="togglePlay($event)" <!-- here I have added @click as an event handler -->
          class="btn btn-primary"
      >
      <font-awesome-icon id="playIcon" icon="play" />
      </button>
      <audio ref="audio"></audio>
  </div>
</template>
<script>
export default {
methods :{
    togglePlay(ev) { //since update is always true we don't need it,
      if (this.isLoaded != true) { // lets get the event instead
        return;
      }

      if (this.isPlaying == true) {
          this.audioDOM.pause();
          this.isPlaying = false;
          this.sendUpdate();
      } else {
          this.audioDOM.play();
          this.isPlaying = true;
          this.sendUpdate()
      }
    }

  }
}

<script>

Awkward. Turns out the error was a DOMException because I had set the source wrong. Whoops!