Reuse my Vue component that contains x-template?

I have a vue template I have adapted from the vue.js docs to provide a modal for confirmation of an operation.

<template>
    <span>
        <button class="btn btn-sm btn-info" @click="showModal=true">Edit</button>
        <script type="text/x-template" id="modal-template">
            <transition name="modal">
                <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-container">
                            <div class="modal-header">
                                <slot name="header">
                                    Custom Header
                                </slot>
                            </div>
                            <div class="modal-body">
                                <slot name="body">
                                    Custom Body
                                </slot>
                            </div>
                            <div class="modal-footer">
                                <slot name="footer">
                                    Custom Footer
                                </slot>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </script>

        <modal v-if="showModal" @close="showModal=false">
            <h3 slot="header" class="ml-auto mr-auto">Edit Resource Type</h3>
            <div slot="body">
                <p>This will replace all instances of  in the database.</p>
                <input v-model="name">
            </div>
            <span slot="footer">
                <button class="btn btn-sm btn-info ml-auto" @click="showModal=false">
                    Cancel
                </button>
                <button class="btn btn-sm btn-danger ml-1" @click="onEdit">
                    Update
                </button>
            </span>
        </modal>

    </span>
</template>
<script>
    export default {
        props: ['itemId', 'itemName'],

        data() {
            return {
                showModal: false,
                id: this.itemId,
                name: this.itemName,
                originalName: this.itemName
            }
        },

        methods: {
            onEdit() {
                this.showModal = false;
                axios({
                    method: 'PUT',
                    url: '/resource_types/'+this.id,
                    data: {id: this.id, name: this.name},
                    config: { headers: {'Content-Type': 'multipart/form-data' }}
                })
                    .then(response => {
                        history.go(0);
                    })
                    .catch(e => {
                        this.errors.push(e);
                })
            }
        }
    }
</script>
<style>
    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: table;
        transition: opacity .3s ease;
    }

    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

    .modal-container {
        width: 300px;
        margin: 0px auto;
        padding: 15px 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }

    .modal-header h3 {
        margin-top: 0;
        color: red;
    }

    .modal-body {
        margin: 15px 0;
    }

    .modal-default-button {
        float: right;
    }

    /*
     * The following styles are auto-applied to elements with
     * transition="modal" when their visibility is toggled
     * by Vue.js.
     *
     * You can easily play with the modal transition by editing
     * these styles.
     */

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>

How do I simplify this so I can reuse the component? I have tried to extract the x-template to its own component with no success. What I'd like is to be able to use one template and pass the content of the slots and the "POST" / "PUT" url's. Currently I have 3 models I need to update and delete on and have 6 components to handle this. Seems a lot of repetition. I'm thinking one reusable component for edit and one for delete. I

via Chebli Mohamed