How to create a rectangle using vue2-google-maps?

Question

I'm creating an application using vue2-google-maps. I need to create a rectangle, but I'm not getting it. I have already looked at documentation examples but I got the following error:

message: "not a LatLngBounds or LatLngBoundsLiteral: not an Object"
name: "InvalidValueError"

<template>
    <gmap-map :center="center" :zoom="12" class="formeGoogleMaps">
        <gmap-marker></gmap-marker>
        <gmap-rectangle ref="rectangleRef" :center="{ north: 33.685, east: 33.671, south: -116.234, west: -116.251 }"
                        :editable="false"
                        :visible="true"
                        :options="{fillColor:'blue',fillOpacity:0.2}"
        ></gmap-rectangle>
    </gmap-map>
</template>

<script>
    export default {
        name: "MainMaps",
        data() {
            return {
                center: {lat: 41.853493, lng: 12.554369},
                markers: [],
                places: [],
                currentPlace: null,
                marker1: '',
                marker2: '',
            }
        },
        mounted: function () {

            this.$refs.rectangleRef.$rectanglePromise.then(() => {
                const {$rectangleObject} = this.$refs.rectangleRef; 
                const map = $rectangleObject.getMap();
                map.fitBounds($rectangleObject.getBounds());
            })
        }
    }

</script>