vue 2 global compoenent called inside another won't render

I am adding tinymce to my Laravel 5.4 project. I have made it into a global component. This works fine. Does what it's supposed to and everything is great. Now, when following along to Laracasts latest "build a forum with TDD" series.. I got to thinking I can just add in that component to the reply component and use it there too! Yeah.. no. I'm a vue nub, so I'm sure I'm missing something obvious. Can anyone help? I even decided to call the global as a child component too.. no joy there either.

Vue debugging tools on chrome says it's there... but the editor won't render. So I'm a bit confused. I've tried adding <slot> to various places too, that made no change. Any help would be greatly appreciated!

Thanks all!

Code below-

app.js:

Vue.component('flash', require('./components/Flash.vue'));
Vue.component('reply', require('./components/Reply.vue'));
Vue.component('tinymce-editor',require('./components/Tinymce.vue'));

const app = new Vue({
    el: '#app',
});

Tinymce.vue:

<template>
    <textarea name="body" class="form-control" id="tinymce" v-text="body" rows="5"></textarea>
</template>

<script>
    export default {
        name: 'tinymce-editor',
        props: {
            body: {
                default: 'Something to say, have you?'
            }
        },

        mounted: function() {
            const self = this;
            tinymce.init({
                menubar: false,
                path_absolute: "/",
                selector: "#tinymce",
                entity_encoding: "raw",
                toolbar_items_size: "small",
                style_formats: [
                    {"title": "Bold", "icon": "bold", "format": "bold"},
                    {"title": "Italic", "icon": "italic", "format": "italic"},
                    {"title": "Underline", "icon": "underline", "format": "underline"},
                    {"title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough"},
                    {"title": "Superscript", "icon": "superscript", "format": "superscript"},
                    {"title": "Subscript", "icon": "subscript", "format": "subscript"},
                    {"title": "Code", "icon": "code", "format": "code"}
                ],
                plugins: 'advlist anchor autolink autoresize code colorpicker hr image link lists preview searchreplace spellchecker textcolor wordcount',
                block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
                toolbar1: "undo redo | formatselect | bullist numlist | link unlink | uploadimg image",
                toolbar2: "styleselect fontsizeselect | forecolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat",
                init_instance_callback: function(editor) {

                    // init tinymce
                    editor.on('init', function () {
                        tinymce.activeEditor.setContent(self.value);
                    });
                }
            });
        },
        update: function(newVal, oldVal) {
            // set val and trigger event
            $(this.el).val(newVal).trigger('keyup');
        }
    }
</script>

Reply.vue:

<script>
    import Favorite from './Favorite.vue';
    import Tinymce from './Tinymce.vue';
    export default {
        name: 'Reply',
        props: ['attributes'],

        components: {
            'favorite': Favorite,
            'tinymce-editor': Tinymce
        },

        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },

        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });

                this.editing = false;

                flash('Updated!');
            },

            destroy() {
                axios.delete('/replies/' + this.attributes.id);

                $(this.$el).fadeOut(300, () => {
                    flash('Your reply has been deleted.');
                });
            }
        }
    }
</script>

reply.blade.php:

<reply :attributes="" inline-template v-cloak>
    <div id="reply-" class="panel panel-default">
        <div class="panel-heading">
            <div class="level">
                <h5 class="flex">
                    <a href="">
                        
                    </a> said ...
                </h5>

                <favorite :reply=""></favorite>
            </div>
        </div>
        <div class="panel-body">
            <div v-if="editing">
                <div class="form-group">
                    <tinymce-editor body=""></tinymce-editor>
                </div>
                <button class="btn btn-xs btn-primary" @click="update">Update</button>
                <button class="btn btn-xs btn-link" @click="editing = false">Cancel</button>
            </div>

            <div v-else v-html="body"></div>
        </div>
        @can('update', $reply)
            <div class="panel-footer level">
                <button class="btn btn-xs btn-success mr-1" @click="editing = true">Edit</button>
                <button class="btn btn-xs btn-danger mr-1" @click="destroy">Delete</button>
            </div>
        @endcan
    </div>
</reply>

via Chebli Mohamed