Vue.js + Require.js расширяющий родительский

Я новичок в Vue.js, но пытаюсь справиться с этим. Пока все прошло хорошо, и у меня довольно далеко, но я застрял, расширяя шаблон родителей.

Я пытаюсь сделать виджеты панели инструментов, которые расширяют макет виджетов по умолчанию (в Boostrap). Обратите внимание, что приведенный ниже код использует Vue, Require, Underscore & Axios.

Родительский файл - _Global.vue

<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            <b>{{ widgetTitle }}</b>
            <div class="pull-right">
                <a href="#" v-on:click="toggleMinimized"
                   v-bind:title="(isMinimized ? 'Show widget' : 'Hide widget')">
                    <i class="fa fa-fw" v-bind:class="isMinimized ? 'fa-plus' : 'fa-minus'"></i>
                </a>
            </div>
        </div>
        <div class="panel-body" v-if="!isMinimized">


            <div class="text-center text-muted" v-if="!isLoaded">
                <i class="fa fa-spin fa-circle-o-notch"></i><br />
            </div>

            <parent v-if="isLoaded">
                <!-- parent content should appear here when loaded -->
            </parent>
        </div>
    </div>
</template>
<script>
    export default {

        // setup our widget props
        props: {
            'minimized': {
                'default': false,
                'required': false,
                'type': Boolean
            }
        },

        // define our data
        data: function () {
            return {
                widgetTitle: 'Set widget title in data',
                isLoaded: false,
                isMinimized: this.$props.minimized
            }
        },

        // when vue is mounted, open our widget
        mounted: function () {
            if(!this.isMinimized) {
                this.opened();
            }
        },

        // define our methods
        methods: {

            // store our widget state to database
            storeWidgetState: function () {

                // set our data to send
                let data = {
                    'action' : 'toggleWidget',
                    'widget' : this.$options._componentTag,
                    'state' : !this.isMinimized
                };

                // post our data to our endpoint
                axios.post(axios.endpoint, data);
            },

            // toggle our minimized data
            toggleMinimized: function (e) {

                // prevent default
                e.preventDefault();

                // toggle our minimized state
                this.isMinimized = !this.isMinimized;

                // trigger opened if we aren't minimized
                if(!this.isMinimized) this.opened();

                // save our widget state to database
                this.storeWidgetState();
            },

            // triggered when opened from being minimized
            opened: function () {
                console.log('opened() method is where all widget logic should be placed');
            }
        }

    }
</script>

Детский файл - Example.vue Должен расширять _Global.vue, используя mixins, а затем отображать содержимое внутри .panel-body

<template>
    <div>
        I want this content to appear inside the .panel-body div

        {{ content }}

         <img v-bind:src="image.src" v-bind:alt="image.alt"
             v-if="image.src" class="img-responsive" style="margin: 0 auto" />
    </div>
</template>
<script>

    // import our widgets globals
    import Global from './_Global.vue'

    export default {

        components: {
            'parent': {
                // what can I possibly put here??
            }
        },

        // use our global mixin for all widgets
        mixins: [Global],

        // setup our methods for this widget
        methods: {

            opened: _.debounce(function () {

                // make sure this can only be opened once
                if(this.hasBeenOpened) return;
                this.hasBeenOpened = true;

                // temporarily allow axios to make external requests
                let axiosHeaders = axios.defaults.headers.common;
                let vm = this;
                axios.defaults.headers.common = {};

                axios.get('https://yesno.wtf/api')
                    .then(function (res) {

                        // set our content
                        vm.content = null;

                        // set our image content
                        vm.image.src = res.data.image;
                        vm.image.alt = res.data.answer;

                    })
                    .catch(function (err) {

                        // set our error text
                        vm.content = String(err);

                    })
                    .then(function () {

                        // this will always hit..
                        vm.isLoaded = true;

                    });

                // restore our axios headers for security
                axios.defaults.headers.common = axiosHeaders;
            }, 300)
        },

        // additional data
        data: function () {
            return {

                // set our widgets title
                widgetTitle: 'Test title',

                // logic for the specific widget
                hasBeenOpened: false,
                content: 'Loaded and ready to go...',
                image: {
                    src: false,
                    alt: null
                }
            };
        },

    }
</script>

В настоящее время мой родительский шаблон просто полностью переписывает мое дочернее представление. Единственный способ заставить его работать - явно указать параметр шаблона внутри компонентов → parent: {}, но я не хочу этого делать...?