我收到一个 json 列表，并将其发送给一个组件

const app = new Vue({
el: '#app',
data: {
    tablaUsuarios: []
},
mounted() {
    axios.get(url + 'listar/')
        .then(res => {
            this.tablaUsuarios = res.data
        })
        .catch(err => {
            console.error(err);
        })
}
})

Vue.component('tabla-usuario', {
props: ['listaUsuarios'],
template:`<div class="table-responsive">
        <table class="table table-hover text-center">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="usuario in listaUsuarios">
                    <td> {{ usuario.nombre }}</td>
                    <td> {{ usuario.correo }}</td>
                    <td> {{ usuario.password }}</td>
                </tr>
            </tbody>
        </table>
    </div>` 
  })

在 html 中

<tabla-usuario :listaUsuarios="tablaUsuarios"></tabla-usuario>

从技术上讲，它应该是这样工作的，问题是在 DOM 中它向我显示了这样的信息

<div class="table-responsive" listausuarios="[object Object],[object Object],[object Object],[object Object],[object Object]">
        <table class="table table-hover text-center">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

有谁知道这个主题，能告诉我问题出在哪里吗？