chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue

<template>
   <div class="container">
      <div id='address_map' v-bind='init' style='height:400px; width:400px;'></div>
   </div>
</template>

<script>

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

let map;

export default {
   name: 'AddressMap',
   data() {
   },//TODO useful?
   computed: {
      center: {
         set(value) {
            this.$store.commit('setMapCenter', value);
         },
         get() {
            return this.$store.state.addressMap.center;
         }
      },
   },
   // watch: {
   //    center: get() {
   //        console.log()
   //    }
   // },
   methods:{
      init() {
         map = L.map('address_map').setView([48.8589, 2.3469], 12);

         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);

         L.marker([48.8589, 2.3469]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();

         console.log(map);
      },
      update() {
         console.log('update map', this.$store.state.addressMap.center)
         map.setView(this.$store.state.addressMap.center, 12);
         //TODO update map view based on the store map centerS
      }
   },
   mounted(){
      this.init()
   }
}
</script>