How to get data from JSON for chart.js, using vue.js

all.

I want to build charts from my JSON data, but can not understand how do it. Data fetch('receive'), and build table. It is OK

var ordersTable = Vue.component('orders-table', {
    template: ` 
    <div>
          <table class="table table-bordered">
          <thead>
            <tr>
              <th>orderdate</th>
              <th>cancelled</th>
              <th>reserved</th>
              <th>delivered</th>
              <th>ordersumm</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="column in orders">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
    </div>
        `, 

  data: function ()  {
    return {
      orders: []
    }
  },
  created:function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      this.orders = res;
      });
  },
});

I try to build charts with orderdate Labels, and 3 Datasets: cancelled, reserved, delivered. Like this: enter image description here How i can do it? Labels and data must fill from fetch. My not working code:

var orderChart = Vue.component('order-chart', {
  extends: VueChartJs.Bar,
  mounted () {
    this.renderChart({
      labels: [],
      datasets: [
        {
          label: 'cancelled',
          backgroundColor: 'red',
          data: []
        },
        {
          label: 'reserved',
          backgroundColor: 'blue',
          data: []
        },
        {
          label: 'delivered',
          backgroundColor: 'green',
          data: []
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})}
  ,
  data: function ()  {
    return {
      orders: []
    }
  },
  created:function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      this.orders = res;
      });
  },
})