How to pass data from Blade to VUEjs Chart.js/Vue-Chartjs components

I have to use vuejs for one my project and I have never used it before.

I want to use Chart.js library and vue-chartjs wrapper to take some data from blade variables and drop into chart.

I am using this vue component app.vue:

app.vue

<template>
  <div id="app">
    <AreaChart/>
    <PieChart/>
    <BarChart/>
    <RadarChart/>
    <LineChart/>
  </div>
</template>
<script>
import AreaChart from "./components/AreaChart.vue";
import PieChart from "./components/PieChart.vue";
import BarChart from "./components/BarChart.vue";
import RadarChart from "./components/RadarChart.vue";
import LineChart from "./components/LineChart.vue"
export default {
  name: "App",
  components: {
    AreaChart,
    PieChart,
    BarChart,
    RadarChart,
    LineChart
  },
  data() {
    return {
      chartData: {
        Books: 24,
        Magazine: 30,
        Newspapers: 10
      }
    };
  }
};
</script>
..css..

Then this BarChart.js chart.js code

import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart(
      {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    );
  }
};

Now I can use the chart in my blade template, but how would I pass data from variable:

{{$someDataThatIwantToShow}}     in ->

<div id="app">
    <componentVUE></componentVUE>  
</div>

The chart I need is showing local data from this code line:

 data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]

I would appreciate any answers or suggestions for a read.