Vue Leaflet Memory Leak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.0/vue-router.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<div id="app">
  <p>Click between the "Home" and "Map" pages below to see the memory leak. How do I stop this from happening?</p>
  <router-link to="/">Home</router-link>
  <router-link to="/Map">Map</router-link>
  <p id="memory">Memory: -MB</p>
  <router-view></router-view>
</div>

CSS

#map {
  width: 100%;
  height: 400px;
}

Babel + JSX

const HomeComponent = {
	template: '<h1>Home</h1>'
};

const MapComponent = {
	template: '<div><p id="loading">Fetching Data...</p><div id="map">Map</div></div>',
  data: function() {
  	return {
    	map: null
    }
  },
  destroyed() {
  	this.map.remove();
  },
  mounted(){
  	this.map = L.map('map').setView([51.505, -0.09], 8);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
    
    fetch("https://raw.githubusercontent.com/martinjc/UK-GeoJSON/master/json/administrative/gb/lad.json")
    	.then((response) => response.json())
      .then((data) => {
      	L.geoJSON(data).addTo(this.map);
        
        document.getElementById("loading").innerHTML = "Fetch Complete"  
        let memory = window.performance.memory === undefined ? "Use Chrome Browser or View in Developer Tools" : Math.round(window.performance.memory.usedJSHeapSize/1000000,1) + "MB"
        document.getElementById("memory").innerHTML = "Memory: " + memory
      })
  }
};

const routes = [{
  	path: '/',
  	component: HomeComponent
  },
  {
  	path: '/map',
  	component: MapComponent
  }];

const router = new VueRouter({routes});

new Vue({
	el: '#app',
	router
});