Can't display leaflet.js map in Vue component - leaflet

Question

I am getting error:
Here is my code:
var guestContent = Vue.extend({
template: `
<div>
test
</div>
`,
data: function ()
{
return {
map: false
}
},
ready: function()
{
this.map = L.map('map').setView([51.505, -0.09], 13);
},
methods:
{
}
}
);
var userContent = Vue.extend({
template: `
<p>SOME USER CONTENT TEST</p>
`
});
var adminContent = Vue.extend({
template: `
<p>ADMIN CONTENT TEST</p>
<div id="map" style="width: 600px; height: 400px"></div>
`
});
I am getting next error: Map container not found.

Answer 1

The DOM is not ready when you try to create the map. Wrap it with this.$nextTick().
ready: function() {
this.$nextTick(function () {
this.map = L.map('map').setView([51.505, -0.09], 13);
}
},

Answer 2

You created 3 different components: guestContent, userContent, adminContent.
But you load map only in guestContent which don't has tag with id="map". You need to add map container to template.
var guestContent = Vue.extend({
template: `
<div id="map" style="width: 600px; height: 400px"></div>
`,
data: function ()
{
return {
map: false
}
},
ready: function()
{
this.map = L.map('map').setView([51.505, -0.09], 13);
},
methods:
{
}
}
);
Vue.component('guest-content', guestContent)
new Vue({
el: '#app'
})
Check this example http://jsfiddle.net/3dqeuoqL/