title: How to resize map in Vue2Leaflet if container was hidden at first
body: <p>How can I reload a Leaflet map from <a href="https://www.npmjs.com/package/vue2-leaflet" rel="nofollow noreferrer">Vue2Leaflet</a> if it was hidden at first and is then shown (e.g. if hidden by bootstrap collapse element)?</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-button v-b-toggle="collapse" variant="primary"&gt;Show map&lt;/b-button&gt;
      &lt;b-collapse id="collapse"&gt;
        &lt;div id="map"&gt;
          &lt;LMap :zoom=13 :center="[47.413220, -1.219482]"&gt;
            &lt;LTileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"&gt;&lt;/LTileLayer&gt;
          &lt;/LMap&gt;
        &lt;/div&gt;
      &lt;/b-collapse&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue'
  import { LMap, LTileLayer } from 'vue2-leaflet'
  import BootstrapVue from 'bootstrap-vue'
  import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  import 'leaflet/dist/leaflet.css'
  
  Vue.use(BootstrapVue)
  ...
  export default {
    ...
    components: {
      LMap,
      LTileLayer
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  div#map {
    height: 300px;
    width: 500px;
  }
  &lt;/style&gt;
  </code></pre>