Google Mapにて現在画面上に映し出されている位置情報をVue.jsを用いて取得したい。

前提・実現したいこと

Google Mapにて現在画面上に映し出されている位置情報をVue.jsを用いて取得したい。
質問者のイメージでは以下の通りなると考えていました。

・ボタンを押す（@click="getInfo“)
・methods内のgetInfo( )が発火する
・getInfo( )によって、data内のinfos[ ]に取得したデータが格納される
・格納されたデータは{{ info }}で出力される。

＊　現状GoogleMapは正常に出力されています。
今回はgoogle-maps-api-loaderを用いた実装を考えているので、vue2-google-mapsでの回答はご遠慮お願いします。
プログラミング初学者であり、簡単な質問かもしれませんが、ご回答よろしくお願いします。

発生している問題・エラーメッセージ

ボタンを押した時にgetCenterメソッドが発火し、画面上の経度・緯度をinfos[]に格納されると思っていたが、'getCenter' of undefined"というエラーメッセージが返ってくる。

該当のソースコード

<template> <div> <div class="map" ref="googleMap"></div> <button @click="getInfo">地図情報の取得</button> <p v-for="info in infos" :key="info.id"> {{ info }} </p> </div> </template> <script> import GoogleMapsApiLoader from 'google-maps-api-loader'; export default { data(){ return{ google:null, infos:[] } }, async mounted() { const googleMapApi = await GoogleMapsApiLoader({ apiKey: 'My API' }); this.google = googleMapApi; this.initializeMap(); },

methods:{
getInfo(){
const center = this.$refs.googleMap.getCenter()
this.infos.push([center] lat: ${center.lat()} lng: ${center.lng()})
},
initializeMap(){
new this.google.maps.Map(this.$refs.googleMap,
{
zoom:15,
center:{ lat: 35.681236, lng: 139.767125 },
mapTypeId: google.maps.MapTypeId.ROADMAP
})
},
}
}