Vue.js Google在Vuejs中映射矩形多边形

我正在尝试添加谷歌地图，允许用户在地图上绘制多边形，这样我就可以保存他们选择的区域位置边界。我在google maps文档页面上看到过一个实现，但我似乎无法在vue cli项目中实现它，因为我正在使用vue2 google maps。我可以加载地图真的很好，但我只是不能似乎添加多边形的工作

<template>
  <gmap-map ref="map" :center="myCoordinates" :zoom="13" style="width:100%;  height: 400px;">
  <gmap-polygon :paths="paths"></gmap-polygon>
  </gmap-map> 

</template>
<script>
 export default {
    name: 'GeoMap',
    data() {
        return {
            myCoordinates: { lat: 10.3157, lng: 123.8854 },
            mapCoordinates: { lat: 0, lng: 0 },
            paths: [],
            map: null
        };
    },

    created() {
        this.$getLocation({})
            .then(coordinates => {
                this.myCoordinates = coordinates;
                console.log(coordinates);
            }).
            catch(error => {
                alert(error);
        });

    },

    mounted() {
        this.$refs.map.$mapPromise.then(map => this.map = map);
    }
};
</script>

导出默认值{
名称：“GeoMap”，
数据（）{
返回{
坐标：{lat:10.3157，lng:123.8854}，
地图坐标：{lat:0，lng:0}，
路径：[]，
映射：空
};
},
创建（）{
此。$getLocation（{}）
.然后（坐标=>{
这个。坐标=坐标；
控制台日志（坐标）；
}).
捕获（错误=>{
警报（错误）；
});
},
安装的（）{
this.$refs.map.$mapromise.then（map=>this.map=map）；
}
};