Markers clone and dont show title when creating

[tallesdantas]

hi guys i have this map in my layoyt ` <button @click="getRoute()">rota <gmap-map ref="meumapa" :center="{lat:-7.1466036, lng:-34.9516381}" :zoom="11" map-type-id="terrain" style="height: 300px"

    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>

    </gmap-map>`

and in my vue component i have:

`data () { return { directionsService:{}, directionsDisplay:{},

      infoContent: 'x',
      infoWindowPos: {
        lat: 0,
        lng: 0
      },
      infoWinOpen: true,
      currentMidx: null,
      //optional: offset infowindow so it visually sits nicely on top of our marker
      infoOptions: {
        pixelOffset: {
          width: 0,
          height: -35
        }
      },

      markers: [],

}, methods: { search (terms, done) { setTimeout(() => { done(filter(terms, {field: 'value', list: parseLocation()})) }, 400) }, selected (item) {

      if(this.$data.obsEntrega == '')
      {
        Toast.create("Não é possível criar uma corrida de entrega sem descrição");
        return null;
      }

      this.$data.desinosCarga = '';

      if(this.$data.listaDestinosCarga.length > 9)
      {
        Toast.create("Não é possivel adicionar mais do que 10 destinos");
        this.$data.obsEntrega = '';
        return null;
      }
      Toast.create(`Destino Selecionado "${item.label}"`);
      this.$data.listaDestinosCarga.push({obs:this.$data.obsEntrega,label:item.label,nota:0});
      this.$data.obsEntrega = '';
    }

setPlace(place) {
      if(this.markers.length > 0)
          {
            this.markers[0]= {
                position: {
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng()
                },
                infoText: 'Marker 1'
              };
          }else{
            this.markers.push({
                position: {
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng()
                },
                infoText: 'Marker 2'
            });
          }
        },
        usePlace(place) {
            console.log('useplace',this.place);
          if (this.place) {
                console.log(this.place);

          }
        },
        setPlace2(place) {

            this.markers.push({
                position: {
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng()
                },
                infoText: 'Marker 2'
            });

        },
        getRoute: function () {

              this.directionsService = new google.maps.DirectionsService()
              this.directionsDisplay = new google.maps.DirectionsRenderer()
              this.directionsDisplay.setMap(this.$refs.meumapa.$mapObject)
              var vm = this
              //console.log(google-marker);
              console.log(VueGoogleMaps.Marker);
              vm.directionsService.route({
                origin: vm.markers[0].position, // Can be coord or also a search query
                destination: vm.markers[1].position,
                travelMode: 'DRIVING'
              }, function (response, status) {
                if (status === 'OK') {

                  vm.directionsDisplay.setDirections(response) // draws the polygon to the map

                  vm.$refs.meumapa.resizePreserveCenter();

                } else {
                  console.log('Directions request failed due to ' + status)
                }
              })
            }
}

`

every thing works fine, i can set the two markers but they dont appear with the description, and when i move the markers on the map they dont refresh the lat and long. After i move them if i set a new route they will create the default markers on the default position and dont create the route for the new positions, Images for example: