Making an audio player APlayer in Vue, manipulating the playlist rerenders the component, starting playback over -- how could I get around this?

I've got a player component:

<template>
  <div class="player-wrapper">
    <player :music="playlist" ref="player"></player>
  </div>
</template>

<script>
import VueAPlyer from "vue-aplayer"

export default {
  components: {
    player: VueAPlyer
  },
  computed: {
    playlist() {
      return this.$store.state.playlist
    }
  }
}
</script>

<style>
</style>

And an action to add a song:

ADD_SONG (state) {
    state.playlist.push(
      {
        title: 'Preparation2',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://devtest.qiniudn.com/Preparation.mp3',
        pic: 'http://devtest.qiniudn.com/Preparation.jpg'
      }
    )
  }

The problem becomes that when I push the new song in to the playlist, the player component recomputes the playlist and starts over.

Having a playlist object like this feels natural to use, but I can't think of any way to prevent this reloading other than to have the Player itself 'watch' changes to the playlist and then natively tell APlayer to add a song to the playlist (which I am assuming won't rerender the audio component) -- which feels very heavy. Am I missing an obvious solution?