Vue Leaflet map tiles in wrong order [duplicate]

Question

I just trying Vue Leaflet and trying to use this example. But when I try it in my local server, the map has wrong order.

Here's my code

<template>
  <div class="home">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-polygon v-for="s in shapes"
                   :key="s.id"
                   :color="s.color"
                   :lat-lngs="s.geometry.coordinates"
                   @l-mouseover=change_color(s)
                   >
        </l-polygon>
    </l-map>
  </div>
</template>

<script>
import { LMap, LPolygon, LTileLayer } from 'vue2-leaflet'
export default {
  components: { LMap, LPolygon, LTileLayer },
  name: 'home',
  data () {
    return {
      zoom: 7,
      center: [47.413220, -1.219482],
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      shapes: [
        {
          id: 'my_id',
          color: '#3388ff',
          geometry: {
            coordinates: [
              [[[47, -1], [47, 0], [48, 0], [48, -1], [47, -1]]]
            ]
          }
        }
      ]
    }
  },
  methods: {
    change_color (shape) {
      shape.color = '#ee0000'
    }
  }
}
</script>

I can't figure out what happened. Any ideas? Thank you.