title: Vue Layers Map not showing on Vuetify dialog
body: <p>I'm working on a Vuetify application that uses Vue-Layers to display OpenStreetMap maps.</p>
  
  <p>Works fine at page level but I have a full screen Vuetify dialog that I want to be able to select map points from.</p>
  
  <p>The map does not get displayed.</p>
  
  <p>The code for the dialog is:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition"&gt;
      &lt;template v-slot:activator="{ on }"&gt;
        &lt;v-btn color="primary" dark v-on="on"&gt;Create PID Group&lt;/v-btn&gt;
      &lt;/template&gt;
      &lt;v-toolbar
          color="black"
          dark
          fixed
      &gt;
        &lt;v-toolbar-side-icon @click="dialog=false"&gt;
          &lt;v-icon&gt;close&lt;/v-icon&gt;
        &lt;/v-toolbar-side-icon&gt;
        &lt;v-toolbar-title&gt;Create PID Group&lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-toolbar-items&gt;
          &lt;v-btn dark flat @click="onSave"&gt;Save&lt;/v-btn&gt;
        &lt;/v-toolbar-items&gt;
      &lt;/v-toolbar&gt;
      &lt;div class="mapContainer" style="background-color: pink"&gt;
        &lt;v-sheet&gt;
  
          &lt;vl-map
              :load-tiles-while-animating="true"
              :load-tiles-while-interacting="true"
              @click="clickCoordinate = $event.coordinate"
              :controls="false"
              class="minimap"
              :z-index="100000"
          &gt;
            &lt;vl-view :zoom.sync="zoom" :rotation.sync="rotation"&gt;&lt;/vl-view&gt;
  
            &lt;vl-layer-tile id="osm"&gt;
              &lt;vl-source-osm&gt;&lt;/vl-source-osm&gt;
            &lt;/vl-layer-tile&gt;
          &lt;/vl-map&gt;
        &lt;/v-sheet&gt;
      &lt;/div&gt;
    &lt;/v-dialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: "CreatePidGroupDialog",
      data() {
        return {
          dialog: false,
          zoom: 16,
          rotation: 0,
          clickCoordinate: undefined,
        }
      },
      methods: {
        onSave() {
          this.dialog = false
        },
      },
    }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .mapContainer {
      position: relative;
      width: 100%;
      height: 100vh;
    }
  
    .minimap {
      height: 168px;
      width: 300px;
      border: 1px solid black;
    }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The map container definitely has size of 300px by 168px</p>
  
  <p>There are no console errors displayed in Chrome developer tools.</p>
  
  <p>Why doesn't the map show?</p>