Данные не восстанавливаются правильно в таблицах данных Laravel vuejs

Question

данные отображаются, но в первой строке отображается сообщение No data available in table ,, как мне решить эту проблему.?данные

$(document).ready(function() {
  $('#datatables').DataTable();
} );

export default {
    data() {
        return {
            editmode: false,
            listProjects : {},
        }
    },
    methods: {
        loadProjects(){
            axios.get("projects")
                 .then(({ data }) => (this.listProjects = data.data));
        },
    },
    created() {
        this.loadProjects();
    },
    mounted() {
        console.log('Component mounted.')
    },
}

<template>
    <table id="datatables">
        <thead>
            <th>name</th>
        </thead>
        <tbody>
            <tr v-for="item in listProjects":key="item.id">
                <td>{{ item.name }}</td>               
            </tr>
        </tbody>
    </table>
</template>