title: How to load again(reload) component in VueJs or destroy it and load again?
body: <p>I have a component in VueJs such as Aplayer(or any other components) for playing audio and managing playlist on it.</p>
  
  <p>Now I need to reload it when I change the playlist without changing the routes. is there any way to reload a component or destroy it then load it immediately?</p>
  
  <p>I want to change the playlist of <a href="https://github.com/SevenOutman/vue-aplayer" rel="nofollow noreferrer">this</a> component while it playing music, but sometimes it plays the music of the previous playlist and I don't know why.</p>
  
  <p>HTML segment:</p>
  
  <pre><code>&lt;aplayer autoplay
    ref="remote"
    :music="music_list[0]"
    :list="music_list"
    :float="float"
    :mutex="mutex"
    repeat="list"
    :mini="mini"
    preload="auto"
    @ended="onEnd"
    @loadstart="playCMD"
    @playing="onStart"
    :listFolded="listFolded"
    :controls="controls"
    :muted.sync="muted"
    :volume.sync="volume"
    slot="display"
  /&gt;
  </code></pre>
  
  <p>JavaScript segment:</p>
  
  <pre><code>export default {
    components: {
      Aplayer
    },
    data: () =&gt; ({
      float: false,
      autoplay: true,
      mutex: true,
      muted: false,
      volume: 0.8,
      mini: false,
      listFolded: false,
      controls: true,
      music_list: [..]
    }),
    methods: {
      onEnd: function () {
        // Doing a series of jobs that leads to raising an event then
        this.music_list = [new music list after event trigger]
      }
    }
  }
  </code></pre>