将自定义标签添加到DOM后激活Vue组件

Question

我在Vue中创建了一个自定义标签，该标签使用组件将内容更改为倒数计时器。

在某些情况下，我需要在页面上添加新的自定义标签，但是当我这样做时，该组件没有被初始化。

如何让Vue监视动态添加的标签并加载组件？

JSFiddle-https://jsfiddle.net/67w8231b/

代码：

Vue.component('countdown-box', function (resolve, reject) {
    resolve({
        props: ['countdownDate', 'countdownTime'],
        data: function () {
            return {
                timeOutput: null
            };
        },
        mounted: function () {
            this.getTimeLeft();
        },
        methods: {
            getTimeLeft: function () {
                let timer = setInterval(() => {
                    if (this.countTime(this.calculateCountdown())) {
                        this.timeOutput = this.calculateCountdown()
                    } else {
                        clearInterval(timer);
                        this.timeOutput = "Time Up!";
                    }
                }, 1000);

                if (this.countTime(this.calculateCountdown())) {
                    this.timeOutput = this.calculateCountdown()
                } else {
                    clearInterval(timer);
                    this.timeOutput = "Time Up!";
                }
            },
            countTime: function (countdown) {
                let parsedArray = [],
                    r = countdown.replace(/([a-zA-Z/\s])+/g, '').split(','),
                    i = 0;

                for (i = 0; i < r.length; i++) {
                    parsedArray.push(parseInt(r[i], 10));
                }

                let datesAdded = parsedArray.reduce((a, b) => a + b, 0);

                if (datesAdded < 0) {
                    return false;
                } else {
                    return true;
                }
            },
            calculateCountdown: function () {

                let _second = 1000,
                    _minute = _second * 60,
                    _hour = _minute * 60,
                    _day = _hour * 24;

                let countdownDate = this.countdownDate,
                    countdownTime = this.countdownTime,
                    currentDate = new Date(),
                    timeLeftRaw = new Date(countdownDate + ' ' + countdownTime) - currentDate,
                    timeLeft = {
                        days: Math.floor(timeLeftRaw / _day),
                        hours: Math.floor((timeLeftRaw % _day) / _hour),
                        minutes: Math.floor((timeLeftRaw % _hour) / _minute),
                        seconds: Math.floor((timeLeftRaw % _minute) / _second),
                    };

                let output = '';
                output += timeLeft.days + ' Days, ';
                output += timeLeft.hours + ' Hours, ';
                output += timeLeft.minutes + ' Minutes, ';
                output += timeLeft.seconds + ' Seconds';

                return output;

            }
        },
        template: '<div>{{ timeOutput }} </div>'
    });
});

new Vue({
    el: '#boxApp',
    computed: {
        countdownTimer: function () {
            return 'countdown-box';
        }
    }
});

$(document).on('click', 'button', function (e) {
    $('button').before('<countdown-box v-bind:is="countdownTimer" id="boxApp" countdown-date="2018-10-14" countdown-time="12:00"></countdown-box>')
});