Передача данных от родителя к ребенку ребенку в vueJS

Question

Я использую компонент dataTable квазар-фреймворка внутри другого компонента (EmployeeComponent), но хочу изменить стиль таблицы. если я изменяю стиль внутри EmployeeComponent, мне нужно переписывать стиль или включать его каждый раз, когда я хочу использовать таблицу квазаров внутри любого другого компонента. Поэтому я помещаю квазар-компонент в другой компонент (TableComponent) и меняю стиль только один раз и включаю его везде, где я хочу.

Вот компонент данных квазара:

 <q-table
    title="Table Title"
    :data="tableData"
    :columns="columns"
    :rows-per-page-options=[1,2]
    :selection="selection"
    :selected.sync="selected"
    row-key="name"
/>

он принимает два основных реквизита (данные, столбцы), которые будут противоположны от Tablecomponent

<table-component :tableThs="tableThs" :tableTds="tableTds"></table-component>

Tablecomponent будет получать данные от EmployeeComponent. Я делаю это работало в случае передачи статических данных, см. Код ниже:

EmployeeComponent

<template>
   <table-component :tableThs="tableThs" :tableTds="tableTds"></table-
   component>
</template>

<script>
 export default {
     data: () =>({
         tableThs: [
              {
                  name: 'desc',
                  required: true,
                  label: 'Dessert (100g serving)',
                  align: 'left',
                  field: 'name',
                  sortable: true
              },
              {
                  name: 'desc1',
                required: true,
                label: 'Calories',
                align: 'left',
                field: 'calories',
                sortable: true
            },
            {
                name: 'desc2',
                required: true,
                label: 'Carbs',
                align: 'left',
                field: 'carbs',
                sortable: true
            },
            {
                name: 'desc3',
                required: true,
                label: 'Protein',
                align: 'left',
                field: 'protein',
                sortable: true
            },
            {
                name: 'desc4',
                required: true,
                label: 'Sodium',
                align: 'left',
                field: 'sodium',
                sortable: true
            },
            {
                name: 'desc5',
                required: true,
                label: 'Calcium',
                align: 'left',
                field: 'calcium',
                sortable: true
            },
            {
                name: 'desc6',
                required: true,
                label: 'Iron',
                align: 'left',
                field: 'iron',
                sortable: true
            }
       ],
       tableTds: [
            {
                name: 'Frozen Yogurt',
                calories: 19,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            {
                name: 'Frozen Yogurt1',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt2',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt3',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt4',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
        ]
   }),
   mounted() {

   }

}

TableComponent

<template>
  <q-table
      title="Table Title"
      :data="tableData"
      :columns="columns"
      :rows-per-page-options=[1,2]
      :selection="selection"
      :selected.sync="selected"
      row-key="name"
  />
</template>

<script>
 export default {
     props: ['tableThs', 'tableTds'],
     data: () =>({
         columns: [],
         tableData: [],
         selection: 'multiple',
         selected: [
          // initial selection; notice we specify the
          // row-key prop of the selected row
          { name: 'Ice cream sandwich' }
      ]
   }),
   beforeMount() {
       this.columns = this.tableThs;
       this.tableData = this.tableTds;
   }
}
</script>

 <style>
   .row{
      margin-left: 0;
      margin-right: 0;
   }
  .q-table-bottom{
     border-top: 0;
  }
 </style>

Проблема в том, что он не работает при передаче данных в компоненте сотрудника по запросу axios.