Пользовательский плагин Vuejs getelementbyid не работает

Question

Я пытаюсь создать плагин vuejs следующего codepen

https://codepen.io/hakimel/pen/nLFDv?editors=0010

Все работает нормально, если я не изменяю строку

var canvas = document.body.appendChild( document.createElement( 'canvas' ) );

, ноесли я пытаюсь использовать следующую строку

var canvas = document.getElementById('mycanvas')

, она всегда возвращает

chart.js?28d6:5 Uncaught TypeError: Cannot read property 'getContext' of null

Я полагаю, что это происходит потому, что div # mycanvas не существует в данный момент.Но как обойти это?

это мой chart.js

export default {
    install: function(Vue) {
        Object.defineProperty(Vue.prototype, 'linechart', { value: new LineChart({ data: [] }) });
    }
}

, а затем я использую следующий код в компоненте vue

created(){
            this.linechart.populate([
                { label: 'One', value: 0 },
                { label: 'Two', value: 100 },
                { label: 'Three', value: 200 },
                { label: 'Four', value: 840 },
                { label: 'Five', value: 620 },
                { label: 'Six', value: 500 },
                { label: 'Seven', value: 600 },
                { label: 'Eight', value: 1100 },
                { label: 'Nine', value: 800 },
                { label: 'Ten', value: 900 },
                { label: 'Eleven', value: 1200, future: true },
                { label: 'Twelve', value: 1400, future: true }
            ]);

            this.linechart.start();
        }

Заранее спасибо!