Dynamically load VueJs component from other component

VueJS version: 1.0.28

I have a form that adds users to a table. The form hits an api to search for the user's name and returns a result. On hitting enter, a row with the user is added to the bottom of the table.

The last column of the row contains a delete button which loads a (bootstrap) modal which is dynamically added to the row. When that modal loads, there is a confirmation to remove the user from the list.

<template>
    <input id="user"
           name="user"
           type="text"
           v-model="query"
           @keydown.down="down"
           @keydown.up="up"
           @keydown.enter="hit"
           @input="update"/>

    <ul class="list-group" v-el:results v-show="hasItems">
        <li class="list-group-item" v-for="item in items" :class="activeClass($index)" @mousedown="hit" @mousemove="setActive($index)">
            <i class="fa fa-user fa-fw"></i> {{ item.name }}
        </li>
    </ul>
</template>

<script>
    import VueTypeahead from 'vue-typeahead'

    export default {
        extends: VueTypeahead,

        props: ['hasAccess', 'timetableId'],

        data() {
            return {
                query: '',
                src: '/search',
                limit: 5,
                minChars: 3,
                queryParamName: 'q'
            }
        },

        methods: {
            onHit (item) {
                this.user = item.name
                this.query = ''
                this.items = []
                this.addToCohort(item)
            },

            addToCohort (user) {
                this.$http
                    .post('/timetable/' + this.timetableId + '/cohort', {user_id: user.id})
                    .then(function (response) {
                            this.addToAttendees(user)
                        },
                        function (response) {
                            //
                        })
            },

            addToAttendees (user) {
                let table = document.getElementById('attendees')
                let row = table.insertRow(table.rows.length)
                row.insertCell(0).innerHTML = this.user

                // Add action column
                let actionCell = row.insertCell(2)
                actionCell.innerHTML = this.actions(user)
                actionCell.className = "text-center"
            },

            actions (user) {
                return [
                    '<a class="btn btn-circle btn-danger btn-sm" role="button" data-target="#modal' + user.id + '" data-toggle="modal"><i class="fa fa-trash"></i></a>',
                    this.deleteModal(user)
                ].join("\n")
            },

            deleteModal (user) {
                return [
                    '<div id="modal' + user.id + '" class="text-left modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" role="dialog">',
                    '<div class="modal-dialog">',
                    '<div class="modal-content">',
                    '<div class="modal-header">',
                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
                    '<h3 class="modal-title" id="myModalLabel">Delete</h3>',
                    '</div>',
                    '<div class="modal-body">',
                    '<p>You are about to delete this from the database. Please confirm if you wish to proceed.</p>',
                    '</div>',
                    '<div class="modal-footer text-left">',
                    '<form">',
                    '<input name="submit" class="spacing-top btn btn-lg btn-danger" type="submit" value="Delete"></form>',
                    '</div>',
                    '</div>',
                    '</div>',
                    '</div>'
                ].join("\n")
            }
        }
    }
</script>ß

How would I add a DeleteModal to my dynamic row? At the moment I have an ugly method that creates some HTML but I want to have a DeleteModal component instead.

I would want my DeleteModal component to be something like...

<template>
    <div id="modal_{{ modalId }}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" role="dialog" v-el:modal>
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 class="modal-title" id="myModalLabel">Delete User From Course?</h3>
                </div>

                <div class="modal-body">
                    <p>You are about to delete this from the database. Please confirm if you wish to proceed.</p>
                </div>

                <div class="modal-footer text-left">
                    <form>
                        <button type="submit" class="btn btn-lg btn-danger" v-on:click="submit">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['hasAccess', 'timetableId', 'attendeeId', 'modalId', 'type'],

        methods: {
            submit (e) {
                e.preventDefault()
                this.deleteAttendee()
                this.closeModal()
            },

            deleteAttendee () {
                this.$http
                    .post('cohorts/' + this.timetableId + '/' + this.attendeeId + '/' + this.type, {
                        _method: 'delete'
                    })
                    .then(function (response) {
                            this.removeFromTable(response.data)
                        })
            },

            removeFromTable () {
                document.getElementById('attendee_' + this.type + '_' + this.attendeeId).remove()
            },

            closeModal () {
                $('#' + this.$els.modal.id).modal('toggle');
            }
        }
    }
</script>