如何在element-ui中手动调用filterHandler？

<template>
  <div>
    <el-table
      :data="tableData"
      ref="myTable"
    >
      <el-table-column
        prop="name"
        label="Name"
        :filters="nameFilters"
        filter-method="filterHandler"
      ></el-table-column>
    </el-table>
    <el-button @click="manualFilter">手动调用筛选</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      nameFilters: [
        { text: 'John', value: 'John' },
        { text: 'Alice', value: 'Alice' },
        { text: 'Bob', value: 'Bob' }
      ]
    };
  },
  methods: {
    manualFilter() {
      const tableInstance = this.$refs.myTable;
      tableInstance.filterHandler({ name: 'John' });
    }
  }
};
</script>