自定义组件不显示

Question

我试图按照以下示例在videojs中与vue集成创建自定义组件： https://jsbin.com/mazowofupe/edit?html,css,js,output 我已将此代码放在我在mount（）中调用的playerinitialize（）函数中，现在已创建该元素，但似乎videojs（或vue）未将页面范围内的css应用于新元素。有人可以帮助我吗？

    mounted() {
            window.playerEvents = this;
            this.playerInitialize();
    }

    playerInitialize() {
                let _this = this
                this.player = videojs('myPlayer', {
                    aspectRatio: "16:9",
                    height: 400
                });
                this.player.ready(function () {
                    _this.createvideocomponent(_myplayer)
                    this.myinterval = setInterval(myTimer, 500);
                });

            },

         createvideocomponent(player){

                var Component = videojs.getComponent('Component');

                var TitleBar = videojs.extend(Component, {

                    constructor: function (player, options) {


                        Component.apply(this, arguments);


                        if (options.text) {
                            this.updateTextContent(options.text);
                        }
                    },

                    createEl: function () {
                        return videojs.createEl('div', {
                            className: 'vjs-title-bar'
                        });
                    },
                    updateTextContent: function (text) {
                        if (typeof text !== 'string') {
                            text = 'Title Unknown';
                        }
                        videojs.emptyEl(this.el());
                        videojs.appendContent(this.el(), text);
                    }
                });
                videojs.registerComponent('TitleBar', TitleBar);
                player.addChild('TitleBar', {text: 'The Title of The Video!'});
            },