Passing data from parent to child to child in vueJS - vuejs2

Question

I'm using quasar framework dataTable component inside another component (EmployeeComponent) but I want to change style of the table. if i change style inside EmployeeComponent, I need to rewrite style or include it everytime I want to use quasar table inside any another component. So I put quasar component inside another component (TableComponent) and change style just one time and include it wherever I want.
Here is quasar dataTable component:
<q-table
title="Table Title"
:data="tableData"
:columns="columns"
:rows-per-page-options=[1,2]
:selection="selection"
:selected.sync="selected"
row-key="name"
/>
it takes two main props (data, columns) which will be optaind from Tablecomponent
<table-component :tableThs="tableThs" :tableTds="tableTds"></table-component>
Tablecomponent will take data from EmployeeComponent. I make it worked in case of passing static data, see code below:
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>
The problem is it is not worked when passing data in employee component by axios request.