"TypeError: Cannot read property 'length' of undefined" in Data Table Filter

[theara]

My code

// Template
<q-table
      :data="tableData"
      :columns="columns"
      :filter="filter"
      :filter-method="tableFilter"
      title="Table Title"
      row-key="name"
    >
      <template
        slot="top-right"
        slot-scope="props"
      >
        <q-search
          v-model="filter"
          hide-underline
        />
      </template>
    </q-table>
-----------
// Data
      filter: '',
      columns: [
        {
          name: 'name',
          required: true,
          label: 'Name',
          align: 'left',
          field: 'name',
          sortable: true,
        },
        ...
      ],
      tableData: [],
------
// Methods
    tableFilter(rows, terms, cols, cellValue) {
      console.log(rows, terms, cols, cellValue)
    },

I get this error when type in Filter Inputbox