Can I dynamically create / destroy Vue components?

So I'm building a fairly complex Vue app that pulls data from our backend API and displays it on the front end, depending on the filters the person chooses. By default, it renders everything at once, and then when the user selects filters, it pulls out "map" components that do not have these attributes. Everything went great until today and I tried to add Google Maps to it using their API (I am using the vue2-google-maps package to make this easier for myself as we plan to implement Polylines in the future).

The problem is I am using Foundation as my CSS framework and map initialization in the Reveal modal. The only way I was able to get the modal working without any warnings in the console is an example I found on the internet that uses the mount () property:

mounted() {
  $(this.$el).foundation();
},
unmounted() {
  $(this.$el).foundation.destroy();
}

      

        
        
        
      

    

This works great until I try to call the google map inside the modal, because instead of creating the map when the modal lights, it creates everything on page load. Not a big deal if I only created a few cards ... but the load I translate is 92 cards. As you can imagine, this is incredibly slow.

In its simplest form, the structure of my application is:

<app>
    <filters-component></filters-component>
    <div class="off-canvas-content">
        <nav-component></nav-component>
        <div class="row card-grid">
            <card-component>
                <modal-component></modal-component>
            </card-component>
        </div>
    </div>
</app>

      

        
        
        
      

    

Currently, the modal component is the only nested component, mostly in a way that makes it easier to keep track of which modal belongs to that map.

I used to use a method for each modal that looked like this, with an @click event on the open modal button, however this still displays all maps on load and also gives a console error that reads "VM215130: 180 Tried to initialize expand element, y which already has a Foundation plugin. " If you press the button more than once.

<a :data-toggle="'modal-' + school.id" @click="openModal(school.id)" class="float-right" tabindex="0" aria-label="Open More window" title="Open More window">
    More <icon name="info-circle" label="More information icon"></icon>
</a>

<script>
    export default {
        methods: {
            openModal: function($schoolid) {
                $('#modal-' + $schoolid).foundation();
                console.log('modal-' + $schoolid + ' launched')
            }
        }
</script>

      

        
        
        
      

    

Is there a way to create a modal component when this button is clicked, or somehow lazily load it only when the modal file is open?