firestoreのデータを配列に入れたい

前提・実現したいこと

Vue CLIを使って開発しています。
Google Cloud Firestoreにあるデータを配列に入れてGoogleMapのピンとして表示したいです。
vue2-google-mapsを使ってマップを表示、ピンを落としています。

以下のように配列を作りたいのですが、どうソースコードを書けばいいかわかりません。

shops = [
 {id: 1, name: 名前, position:{lat: 111111, lng: 222222}},
 {id: 2, name: 名前, position:{lat: 333333, lng: 444444}},
 {id: 3, name: 名前, position:{lat: 555555, lng: 666666}}
 ...
]

該当のソースコード

<GmapMarker
 v-for="m in shops"
 :key="m.id"
 :position="m.position"
>
</GmapMarker>

data() {
 return {
 db: null,
 markers:[]
 }
}

mounted() {
 this.db = firebase.firestore()

 var _this = this
 this.db.collection('shops').onSnapshot(function(querySnapshot) {
 _this.shops = []
 querySnapshot.forEach(function(doc) {
 var data = doc.data()
 data.id = doc.id
 _this.shops.push(data)
 })
 })
}

試したこと

下記のように書けば上記のような配列になると思い、新しく配列を作ってその中に入れてみましたが、動きませんでした。

this.markers.name = this.shops.name
this.markers.address = this.shops.address
this.markers.position.lat = this.shops.lat
this.markers.position.lng = this.shops.lng