I am working with google map api on vue js project. I have a table of data containing positions i want when my data changes change marker position change position without refreshing card. This is my code i want to add the fonctionality of changing marker poisition and how impliment it in my component. this is my code:

      this.initMap(
        this.$refs.googleMaps as HTMLElement,
        this.points
      )
    }
  }

  initMarker(map: google.maps.Map, pList: points[]) {
    const bounds = new google.maps.LatLngBounds()
    pList.forEach(
      (pElement: pElement, index: number) => {

        const marker = new google.maps.Marker({
          position: {
            lat: pElement.geoPoint?.latitude as number,
            lng: pElement.geoPoint?.longitude as number
          },
          icon: { url: 'url' },
          map
        })

        const position = new google.maps.LatLng(
          pElement.geoPoint?.latitude,
          pElement.geoPoint?.longitude
        )

        marker.addListener('click', () => {
          map.panTo(position)
        })

        bounds.extend(position)
      }
    )

    map.fitBounds(bounds)
  }

  initMap(mapElement: HTMLElement, pList: points[]) {
    const gestureOption: GoogleMapsGestureHandlingOptions = 'cooperative'
    const mapProp: google.maps.MapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      gestureHandling: gestureOption,
      disableDefaultUI: true,
      clickableIcons: false,
      minZoom: 20
    }
    this.googleMaps = new google.maps.Map(mapElement, mapProp)
    this.initMarker(this.googleMaps, pList)
  }


  mounted() {
    this.renderMap(
      () =>
        this.initMap(
          this.$refs.googleMaps as HTMLElement,
          this.pList
        )
    )
  }