Создание компонента DataTable в Vuejs2

Question

Я создаю таблицу данных в Vuejs, основанную на Vuetify. Пример: <dataTable :columns="columns" :items="customers" />.

Все работает нормально, кроме предельных данных из backend по Column.

Пример:

id name email
1  daf  daf@da.com
2  aaf  fad@fdaf.com

Here my Child Component

<template>
    <div>
        <dataTable :columns="columns" :items="customers" />
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Customer',
    created() {
        this.fetchCustomer()
    },
    data() {
        return {
            customers: [],
            columns: [
                { text: 'Name', value: 'name' },
                { text: 'Email' },
                { text: 'Phone' },
                { text: 'Address' },
            ],    
        }
    },

    methods: {
        fetchCustomer() {
            axios.get(`api/customer`)
            .then(res => {
                this.$set(this.$data, 'customers', res.data[1].data);
                console.log(res)
            })
            .catch(err => {
                console.log(err.response)
            })
        }
    }
}
</script>

Any Here my Parent Component

<template>
    <div>
        <table class="text-left border-collapse w-full">
            <thead>
                <tr>
                    <td v-for="column in columns" :key="column.value">
                        <span v-for="value in column" :key="value.id">{{ value }}</span>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in items" :key="index">
                    <td v-for="column in item" :key="column.id">
                        {{ column }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: {
        columns: Array,
        items: Array,
    },

    data() {
        return {
        }
    }    
}
</script>

Любая помощь? Спасибо ...