So I just want to add a map marker where the user clicks, but I can't seem to pass an event object from the google map to get the user's click location for placing a marker:

<template>
  <div>
    <GmapMap
  :center="center"
  :zoom="7"
  map-type-id="terrain"
  style="width: 90%; height: 400px"
  @click=this.mark(coords)
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>
  </div>
</template>

<script>
import {gmapApi} from 'vue2-google-maps'
export default {
  computed: {
    google: gmapApi
  },
  data() {
    return {
      center: {lat: 40.66058758, lng: -111.8364045},
      markers: [],
      currentPlace: null
    };
  },
  mounted() {
    this.mark(event),
    this.$refs.mapRef.$mapPromise.then((map) => {
      
    })
  },
  name: 'Google Map',
  methods: {
    setPlace(place) {
      this.currentPlace = place;
    },
    mark(event) {
      this.markers = [
          {
              lat: event.lat,
              lng: event.lng,
              label: 'Marker'
          },
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

This should just be a matter of getting "event" and passing it to the function, right?

This simply results in "Cannot read property 'lat' of undefined"