Vue.component('vue-chart', {
    template: '<canvas></canvas>',
    props: {
        type: {
            type: String,
            default: 'line'
        },
        data: {
            type: Object,
            default: function _default() {
                return {
                    labels: [],
                    datasets: []
                };
            }
        },
        options: {
            type: Object
        }
    },
    data: function data() {
        return {
            chart: null
        };
    },
    mounted: function mounted() {
        var _this = this;

        this.chart = new Chart(this.$el, {
            type: this.type,
            data: this.data,
            options: this.options
        });
        this.$watch('data', function () {
            if (_this.data.datasets && _this.data.datasets.length > 0) {
                _this.data.datasets.map(function (dataset, i) {
                    if (i === _this.chart.config.data.datasets.length) return;
                    _this.data.datasets[i] = _.assign(_this.chart.config.data.datasets[i], dataset);
                });
            }
            _this.chart.config.data = _.assign(_this.chart.config.data, _this.data);
            _this.$nextTick(function () {
                _this.chart.update();
            });
        });
        this.$watch('options', function () {
            _this.chart.config.options = _.assign(_this.chart.config.options, _this.options);
            _this.$nextTick(function () {
                _this.chart.update();
            });
        });
    }
});