Vue JS Утечка памяти и проблемы с DOM

Сейчас пишу большое SPA приложение на Vue JS + Vue Router и столкнулся с проблемой, что каждый раз добавляется огромное количество DOM nodes(узлов) и JS event listeners. Решил погуглить и нашёл обычный пример, который показывает такую же реакцию. Немного его модифицировал и даже после уничтожения компонента, он всё равно существует.

При каждом нажатии на кнопку у Вас будет добавляться DOM Nodes и JS event listeners.

Вот пример с кодом - https://jsfiddle.net/j5Lftgw3/20/

Template:

<div id="app">
  <button @click="showUl()">Show</button>
  <div v-if="show">
    <h2 @click="clickss()">{{msg}}</h2>
    <h2>{{msg}}</h2>
    <h2>{{msg}}</h2>
    <h2>{{msg}}</h2>
    <h2>{{msg}}</h2>
    <h2>{{msg}}</h2>
    <h2>{{msg}}</h2>
  </div>
</div>

VueJS:

new Vue({
  el: "#app",
  data: {
    show: false,
    msg: 'test'
  },
  methods: {
    clickss(){
        //console.log('destroy');
      this.$destroy();
    },
    showUl(){
    
            //this.$root.$off('clickss');
      //if(this.show){
      
            //this.$root.$off('clickss');
      //}
      this.show = !this.show;
    },
  }
})

Статистику наблюдаю из Perfomance monitor

Что бы зайти туда, нужно открыть "Инструменты разработчика" и в дополнительных настройках выпадет список, там Вы найдёте "Perfomance monitor".

Как удалять окончательно DOM узлы и JS event listners?