Cannot read property 'filter' of undefined

[code-crafter365]

<template>
  <div>
    <datatable v-bind="$tableData" />
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
      tableData: {
        columns: [
          { title: 'User ID', field: 'uid', sortable: true },
          { title: 'Username', field: 'name' }
        ],
        data: [
          {uid: 1, name: "test"},
          {uid: 2, name: "test"},
          {uid: 3, name: "test"},
          {uid: 4, name: "test"},
          {uid: 5, name: "test"},
          {uid: 6, name: "test"},
          {uid: 7, name: "test"},
          {uid: 8, name: "test"},
          {uid: 9, name: "test"},
          {uid: 10, name: "test"},
          {uid: 11, name: "test"},
          {uid: 12, name: "test"},
        ],
        total: 12,
        query: {}
      }
    }
  },
  watch: {
    query: {
      handler (query) {
        mockData(query).then(({ rows, total }) => {
          this.data = rows
          this.total = total
        })
      },
      deep: true
    }
  }
}
</script>

Am I wrong?

[kenberkeley]

<datatable v-bind="tableData" />

or

<datatable v-bind="$data.tableData" />