Vuejs自定义插件getelementbyid不起作用

Question

我正在尝试创建以下codepen的vuejs插件

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-component

中使用以下代码

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();
        }

提前致谢！