Google Maps Rectangle Polygon In Vuejs

Question

I'm trying to add google maps to allow a user draw a polygon on a map so I can save area location boundaries they have selected. I have seen an implementation on google maps documentation page but I just cant seem to implement it in the vue cli project am using vue2-google-maps. I can load the map really well but I just cant seem to add the polygon to work.

<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>