Example of using Chart.js with Vue (Laravel).

app.js

/** resources/assets */

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

var VueResource = require('vue-resource');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('chart-here', require('./components/ChartComponent.vue'));

Vue.use(VueResource);

const app = new Vue({
    el: '#app'
});

ChartComponent.vue

<template>
    <!-- resources/assets/js/components -->
    <div>
        <canvas id="canvas"></canvas>
    </div>
</template>

<script>
    import {Chart} from 'Chart.js';
    export default {
        props: {
            labels: String,
            dataProp: String
        },
        methods: {
            renderChart() {
                new Chart(document.getElementById('canvas').getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: JSON.parse(this.labels),
                        datasets: [{
                            label: '# of Laravel apps made by Jack Russels',
                            data: JSON.parse(this.dataProp),
                            backgroundColor: [
                                '#2ecc71',
                                '#e74c3c',
                                '#8e44ad',
                                '#d35400',
                                '#16a085'
                            ]
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            fontSize: 22,
                            text: 'Example'
                        }
                    }
                });
            }
        },
        mounted() {
            this.renderChart();
        }
    }
</script>

gulpfile.js

/** / */

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss');
    mix.webpack('app.js');
    mix.version(['css/app.css', 'js/app.js']);
});

index.blade.php

<!-- resources/views/chart -->
@extends('layouts.app')

@section('content')
<chart-here
    labels="{{ json_encode(['2014', '2015', '2016', '2017', '2020']) }}"
    data-prop="{{ json_encode(['99', '66', '87', '49', '92']) }}">
</chart-here>
@endsection

Thanks but how we can do it in a single file html page with vue.js?