Как правильно перенести шаблон из HTML во Vue.component

День добрый. Столкнулся с такой проблемой. js файл фетчит данные с локального порта, и я вывожу это дело на странице.

js:

//Забираем json из '/receive/', парсим его в gridData 
var gridData = new Vue({
  el: '#gridData',
  data: {
       orders: []
  },
  created:function() {
              let that = this; // The real this
              fetch('/receive/')    
              .then(res => res.json())
              .then(res => {
                this.orders = res;
          });
  }
});

HTML:

<div id="gridData" class="gridData" style="width: 100%">
            <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>Статус </th>
                    <th>Номер </th>
                    <th>Магазин</th>
                    <th>Дата создания заказа</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="column in orders">
                    <td>{{column.status}}</td>
                    <td>{{column.order_id}}</td>
                    <td>{{column.store_id}}</td>
                    <td>{{column.date_created}}</td>
                  </tr>
                </tbody>
              </table>
    </div>

И все отлично отображается на странице:

Но возникла необходимость сделать вторую таблицу на основе этих же данных.

пытаюсь создать vue.component, но кроме имен столбцов ничего не выводится. Прошу помочь, как все правильно оформить.

Последний код, который не выдает ошибки, но данные в столбцы не выводит:

 var myTable = Vue.component('my-table', {
    template: `<table class="table table-bordered">
    <thead>
      <tr>
        <th>Статус заказа</th>
        <th>Номер заказа</th>
        <th>Магазин</th>
        <th>Дата создания заказа</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="key in order">
        <td>{{key.status}}</td>
        <td>{{key.status}}</td>
        <td>{{key.status}}</td>
        <td>{{key.status}}</td>
      </tr>
    </tbody>
  </table>`,
  data: function ()  {
    return {
      orders: []
    }
  },
  props : ['order']
  });
var gridData = new Vue({
  el: '#gridData',
  data: {
      orders: []
  },
  created:function() {
              let that = this; // The real this
              fetch('/receive/')    
              .then(res => res.json())
              .then(res => {
                this.orders = res;
          });
      },
  components: {myTable: myTable},
  ready : function(){
  }
});