How to access map actions on marker click?

[AntonERG]

I'm trying to call map action on the event of marker click, there is no errors in console, but action doesn't happen, my code example is:

<template>
    <div id="q-map">
          <MglMap :mapStyle="mapStyle"
             :center="[filtItems[selectedID].longitude, filtItems[selectedID].latitude]"
             :zoom="14"
              ref="map">
                  <MglMarker v-for="(item, idx) in filtItems" :key="idx" :coordinates="[item.longitude, item.latitude]">
                      <div slot="marker" :id="item.name" @click="pinSelected(idx)">
                      </div>
                  </MglMarker>
            </MglMap>
    </div>
</template>

<script>
   export default {
        methods: {
          async pinSelected (idx) {
             var me = this
             me.$refs.map.map.panTo({
                 coordinates: [30, 30]
             })
          }
       }
  }
</script>

[AntonERG]

Found my bug and working solution !!!

So, I have to remove prop center from <template> at all and instead of panTo I tried flyTo, here is my working code:

<template>
    <div id="q-map">
          <MglMap :mapStyle="mapStyle"
             :zoom="14"
              ref="map">
                  <MglMarker v-for="(item, idx) in filtItems" :key="idx" :coordinates="[item.longitude, item.latitude]">
                      <div slot="marker" :id="item.name" @click="pinSelected(idx)">
                      </div>
                  </MglMarker>
            </MglMap>
    </div>
</template>

<script>
   export default {
        methods: {
          pinSelected (idx) {
             var me = this
             me.$refs.map.map.flyTo({
                 center: [30, 30]
             })
          }
       }
  }
</script>