ReferenceError: map is not defined

[will4906]

Hi, I use vue.js to implement the library. But when i use it in the template, i get an exception.

vue.runtime.esm.js?2b0e:1888 ReferenceError: map is not defined
    at NewClass.initialize (leaflet-deepzoom.js?94c2:47)
    at new NewClass (leaflet-src.js?e11e:301)
    at Function.L.tileLayer.deepzoom (leaflet-deepzoom.js?94c2:103)
    at VueComponent.mounted (Home.vue?76f2:19)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4213)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6559)
    at Vue._update (vue.runtime.esm.js?2b0e:3939)

My code is here. Do i have any wrong action.

<template>
  <div id="mapid"></div>
</template>

<script>
import L from 'leaflet'
import 'leaflet-deepzoom'

export default {
  data () {
    return {}
  },
  mounted () {
    var map = L.map('mapid').setView(new L.LatLng(0,0), 0);

    var dzLayer = L.tileLayer.deepzoom('DeepZoomImage/hubble_files/', { 
        width: 2400, 
        height: 3000
    }).addTo(map)

    map.fitBounds(dzLayer.options.bounds)
  }
}
</script>

<style>
#mapid {
  height: 512px;
}
</style>