Vue компонент и типы данных реквизит

Question

Я пытаюсь создать компонент vue для всех моих сетей данных, я использую библиотеку DataTables (https://datatables.net/),, поэтому я уже создал свой компонент vue:

GridDatos.vue

<template>
<div class="container">
    <h4>{{titulo}}</h4>
    <table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
        <thead>
            <tr>
                <th v-for="col in colNames">{{col}}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th v-for="col in colNames">{{col}}</th>
            </tr>
        </tfoot>
    </table>
</div>

Экземпляр:

Vue.component('grid-datos', require('./components/GridDatos.vue').default);

И использование:

<div id="app">
        <grid-datos 
            url="/api/listadoContactos" 
            titulo="Mis Datos" 
            :col-names="('Name','Position','Office','Age','Start date','Salary')">
        </grid-datos>
    </div>

Но проблема здесь в заголовке таблицы, кажется, что используется последний элемент массива, как вы можете видеть на скриншоте:

Титулы

Определенно, я неправильно устанавливаю массив при вызове компонента. Кто-нибудь может мне помочь?

Большое спасибо. Привет.