Vue2-Google-Map-Markers

Vue2-Google-Map-Markers misplaced when define size

HTML

<script src="https://xkjyeah.github.io/vue-google-maps/vue-google-maps.js"></script>
<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :icon="icon"/>

    </gmap-map>
    Resized: <input type="checkbox" id="checkbox" v-model="resized" >
  </div>

</body>

JavaScript

Vue.use(VueGoogleMaps, {
  load: {
    key: ''
  },
});

new Vue({
  el: '#root',
  computed:{
  	icon(){
    	if (this.resized)
	    	return {
  		  	url:"https://i.ibb.co/bdykLz4/test.png",
      		size: { width: 100, height: 100, f: "px", b: "px" },
      		scaledSize: { width: 50, height: 50, f: "px", b: "px" }
                
    		}
    	else
	    	return {
  		  	url:"https://i.ibb.co/bdykLz4/test.png"
    		}
      
    }
  },
  data: {
  	resized:true,
    startLocation: {
      lat: 38.7126659,
      lng: -9.3051496
    },
    coordinates: {
      0: {
        full_name: 'Point 1',
      lat: 38.7226659,
      lng: -9.3151496
      },
      1: {
        full_name: 'Point 2',
      lat: 38.7136659,
      lng: -9.3061496
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
  }
});