My loop creates google map markers but it fails to set their position correctly so they do not get displayed. Hard coding the position works

Question

For some reason, I am unable to see google map markers that should be placed based on the objects in my markers array after looping through it. If I were to create a second component and hard code the position, the marker appears. After inspecting the components created using the loop, I realized their position is set to undefined even though I set it to m.position any idea why?

<template>
    <div class="wrapper">
        <GmapMap
            :center="center"
            :zoom="zoom"
            :map-type-id="map"
            style="width: 100%; height: 850px"
        >
        <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        />
        </GmapMap>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                images: [],
                markers: [{lat: 42.150527, lng: 24.746477}, {lat: 42.160527, lng: 24.796477}],
                center: {lat: 42.150527, lng: 24.746477},
                zoom: 15,
                map: 'roadmap'
            }
        }
    }
</script>

After hard coding a GmapMarker using the following code, it does get displayed.

<GmapMarker
    :position="{lat: 42.150527, lng: 24.746477}"
    :clickable="true"
    :draggable="true"
    @click="center={lat: 42.150527, lng: 24.746477}"
/>

Answer 1

Within your v-for loop, m is the {lat: ..., lng: ...} object.

These objects do not have a position property so change

:position="m.position"
@click="center=m.position"

to

:position="m"
@click="center=m"