[Vuejs]-How can I able to center the map according to lat and long from JSON data and when click on markers, a pop up come and display the name in vueJS?

I tried to implement it into your code

<script> 
  new Vue({ 
    el: '#feed' , 
    data: { 
      data: [], 
    }, 
    mounted() { 
      this.$nextTick(function() { 
        var self = this; 
        var id = window.location.href.split('=').pop() 

        // Init map 
        var map;

         var myLatlng = new google.maps.LatLng(12.92, 77.25);
          function initMap() {

                   map = new google.maps.Map(document.getElementById('mapName'), {
                      center: myLatlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP, 
                      mapTypeControl: false,
                      zoom: 6
                  });
    }

initMap();


        console.log(id) 
        $.ajax({ 
          url: "https://n2s.herokuapp.com/api/post/get/10", 
          method: "GET", 
          dataType: "JSON", 
          success: function (e) { 
            if (e.status == 1) { 
              self.data = e.data; 
              console.log(e.data);  
              //use code 
              var i=0;    

              // Init markers 
              var marker = new google.maps.Marker({ 
                position: new google.maps.LatLng(e.data.lat , e.data.lon), 
                map: map, 
                title: 'Click Me ' + i, 
              }); 

              // Process multiple info windows 
              (function(marker, i) { 
                // add click event 
                 google.maps.event.addListener(marker, 'click', function () {
                 alert(e.data.bussinessName);
                 });
                  infowindow.open(map, marker); 
                }); 
              })(marker, i);   
            } else { 
              console.log('Error occurred');} 
            }, error: function(){ 
              console.log('Error occurred'); 
            } 
          }); 
        }) 
      }, 
    }) 
 </script>