title: Audio DOM created inside vuex is not reactive
body: <p>I want to create an audio element that would be used for playing all audio urls I have on all routes, I think it's a useful approach for a SPA (Am I right?). So I've decided to declare <em>new Audio</em> in the state of vuex that I can easily reuse and update just mutate the src property of audio object. And it works, but the problem appears when I want to get properties of this audio object such as currentTime and duration for building audio progress bar and it's not reactive. How to solve this problem? </p>
  
  <pre><code>const state = {
    audio: false,
    object: new Audio()
  }
  
  // getters
  const getters = {
    audio: state =&gt; state.audio,
    percentage: state =&gt; (isNaN(Math.round((state.object.currentTime / state.object.duration) * 100))) ? 0 : Math.round((state.object.currentTime / state.object.duration) * 100)
  }
  
  // actions
  const actions = {
    playAudio ({ commit, state }, previewUrl) {
      commit('play_audio', previewUrl)
    },
    stopAudio ({ commit, state }) {
      commit('stop_audio')
    }
  }
  
  // mutations
  const mutations = {
    play_audio (state, previewUrl) {
      state.object.pause()
      state.object.currentTime = 0.0
      state.object.src = previewUrl
      state.object.play()
      state.audio = {
        preview_url: previewUrl
      }
    },
    stop_audio (state) {
      state.object.pause()
      state.object.currentTime = 0.0
      state.src = ''
      state.audio = false
    }
  }
  
  export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  }
  
  </code></pre>