Laravel DataTables Vue.js中的数据无法正确恢复

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>