How selecting some select option element to run filtered request on server?

On Laravel/Vue/Element Plus, site I make filter with some filters in control and in table of Vue file :

class TaskController extends Controller
{
    public function __construct()
    {
    }

    /**
     * Display a vue page container for listing of the Tasks.
     *
     * @return \Illuminate\Routing\Redirector | \Inertia\Response
     */
    public function index()
    {
        $page = 1;
        $request = request();
        $filterTaskCategoryId = $request->filter_task_category_id ?? ''; // I got this filter from request
        $orderBy = $request->order_by ?? 'completed';
        $orderDirection = $request->order_direction ?? 'asc';
        $backendItemsPerPage = 100; //Settings::getValue('backend_items_per_page', CheckValueType::cvtInteger, 20);

        $tasks = Task
            ::getByTaskCategoryId($filterTaskCategoryId) // I aply filter parameter
            ->orderBy($orderBy, $orderDirection)
            ->paginate($backendItemsPerPage, array('*'), 'page', $page);

        return Inertia::render('Admin/Tasks/Index', [
            'tasks' => TaskResource::customCollection($tasks, false),
            'totalTasksCount' => Task::count(),
            'totalOnlyOpenedTasksCount' => Task::onlyOpened()->count()
        ]);
    }
}

and in vue file :

    <el-button @click="clearFilter" style="margin: 5px;" :icon="DeleteFilled">Reset filters</el-button>
    <el-button :href="route('admin.tasks.create')" :icon="DocumentAdd" tag="a">New task</el-button>

    <el-table :data="taskRows" stripe border highlight-current-row @current-change="handleCurrentChange"
              style="width: 100%; margin: 20px;"
              :summary-method="getSummaries" show-summary table-layout="auto">

        <el-table-column label="" width="30" fixed>
            <template #default="scope">
                <el-button :href="route('admin.tasks.edit', scope.row)" :icon="Edit" tag="a"></el-button>
            </template>
        </el-table-column>

        <el-table-column label="" width="30" fixed>
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
                           :icon="Delete"></el-button>
            </template>
        </el-table-column>

        <el-table-column prop="id" label="id" width="20" fixed/>

        <el-table-column prop="taskCategory.name" label="Task category" sortable width="140" :filters="[
    { text: ‘label 1’, value: ‘value 1’ },
    { text: ‘label 2’, value: ‘value 2’ },
    ...
  ]" :filter-method="filterHandler('filter_task_category_id')"/>


  ...
  
    function filterHandler(value, row, column) {
        console.log('filterHandler value::')
        console.log(value)
        console.log('filterHandler row::')
        console.log(row)
        console.log('filterHandler column::')
        console.log(column)
    }

  

I expected that filterHandler is triggered when user changes task_category_id calue (selecting by some task_category element), but it is not triggered. Reading docs on table component I did not find in which way can I selecting some task_category to run filtered request on server?

"@inertiajs/vue3": "^2.0.0",
"vue": "^3.4.0"
"element-plus": "^2.9.5",