fix(VDataTable): fix filter not work

[lzl0304]

Description

fixes #19596

Markup:

<template>
  <v-app>
    <v-container>
      <v-data-table
        :custom-filter="filterOnlyCapsText"
        :headers="headers"
        :items="desserts"
        :search="search"
        class="elevation-1"
        item-key="name"
      >
        <template #top>
          <v-text-field
            v-model="search"
            class="mx-4"
            label="Search (UPPER CASE ONLY)"
          />
        </template>
        <template #body.append>
          <tr>
            <td />
            <td>
              <v-text-field
                v-model="calories"
                label="Less than"
                type="number"
              />
            </td>
            <td colspan="4" />
          </tr>
        </template>
      </v-data-table>
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const search = ref('')
  const calories = ref('')

  const desserts = ref([
    {
      name: 'Frozen Yogurt',
      calories: 159,
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
    },
    {
      name: 'Eclair',
      calories: 262,
    },
    {
      name: 'Cupcake',
      calories: 305,
    },
    {
      name: 'Gingerbread',
      calories: 356,
    },
  ])

  const headers = computed(() => [
    {
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name',
    },
    {
      text: 'Calories',
      value: 'calories',
      filter: value => {
        if (!calories.value) return true

        return value < parseInt(calories.value)
      },
    },
  ])

  const filterOnlyCapsText = (value, search, item) => {
    return (
      value != null &&
      search != null &&
      typeof value === 'string' &&
      value.toString().toLocaleUpperCase().indexOf(search) !== -1
    )
  }
</script>