Updating a marker on button click

[web-programmer-here]

I am trying to update a marker to a new location after a click but cant get it to update

https://codesandbox.io/s/romantic-glitter-32wjh?file=/src/frontend/components/Content.vue

Here is a simple implementation I did:

<template>
  <div>
    <h2>Map Component</h2>
    <button @click="updateLocation()">Update Location</button>
    <GoogleMap
      api-key=""
      style="width: 100%; height: 500px"
      :center="center"
      :zoom="15"
    >
      <Marker :options="{ position: initialLocation }" />
    </GoogleMap>
  </div>
</template>

<script>
import { GoogleMap, Marker } from "vue3-google-map";

export default {
  name: "Content",
  props: {
    data: Object,
  },
  components: { GoogleMap, Marker },

  data() {
    return {
      center: { lat: 40.689247, lng: -74.044502 },
      initialLocation: { lat: 40.689247, lng: -74.044502 },
    };
  },
  methods: {
    updateLocation() {
      this.initialLocation.lat = 40.74860303874883;
      this.initialLocation.lng = -73.98562148637158;
    },
  },
};
</script>

[HusamElbashir]

@web-programmer-here As a workaround you can re-assign initialLocation

updateLocation() {
    this.initialLocation = {
        lat: 40.74860303874883,
        lng: -73.98562148637158
    }
}

[web-programmer-here]

@HusamIbrahim Thanks, that worked