Отправка данных в свойство данных Vue.js, но новые элементы не появляются на карте Google.

Question

Поэтому я решил, что было бы интересно попробовать создать приложение Vue, которое будет использовать карты Google. В настоящее время я отображаю маркеры на основе элементов в массиве. Мой массив начинается с 2 объектов по умолчанию, поэтому моя карта отображает 2 маркера. Затем я добавил кнопку, которая выдвигает дополнительные объекты, однако эти объекты не отображаются на карте. Реактивность Vue довольно нова для меня, поэтому я предполагаю, что я не делаю что-то правильно. Буду признателен за помощь в выяснении чего.

<template>
    <div class="wrapper">
        <button @click='addMark'>Add</button>
        <GmapMap
            :center="center"
            :zoom="zoom"
            :map-type-id="map"
            style="width: 100%; height: 850px"
        >
        <GmapMarker
            v-for="marker in markers"
            :position="marker"
            :clickable="true"
            :draggable="true"
            @click="center=marker"
        />
        </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'
            }
        },
        methods: {
            addMark(){
                this.markers.push({lat: 42.150529, lng: 24.746479})
                console.log(this.markers)
            }
        }
    }
</script>