Vue2-leaflet LMap/LTileLayer not rendering correctly

Question

I'm just trying to add a map to my current Vue2 learning project. After looking at google maps I've decided OSM and Leaflet was the best way to go. But I've ran into an early snag and the map is currently just rendering as a blue square.

This is what my map looks like at the moment.

Here is the Vue component. Both url and url2 are displaying the same thing, I'm not sure if this is an issue with access tokens or if I'm using the wrong URL for OSM.

<template>
  <v-container>
    <h1>Hello</h1>
    <l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
      <l-tile-layer :url="url" :attribution="attribution"/>
    </l-map>
  </v-container>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet';

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      url2: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      // eslint-disable-line
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      center: [33.8688, 151.2093],
      zoom: 12,
    };
  },
  components: {
    LMap,
    LTileLayer,
  },
};
</script>

Answer 1

Looks to me as expected behaviour, given the fact that the coordinates you specify ([33.8688, 151.2093]) point at the Pacific ocean way off Japan:

https://www.openstreetmap.org/#map=4/33.60/151.31

And since you specify a high initial zoom (12), panning around still gets you blue ocean tiles.