[Vuejs]-Vue.js filter not working with property[index]

I don’t know how you calling your data when looping, so i made this one. This is just a sample filtering base on your problem, so you can use it as your reference.

In your template.

<v-text-field 
    prepend-inner-icon="mdi-magnify position-left" 
    outlined dense label="Search"
    v-model="search"
    clearable
    color="blue-grey darken-4"
    background-color="cyan lighten-4"
    class="search mb-2 mt-0 pt-0"
    hide-details
></v-text-field>    
<thead>
  <tr>
    <td>No.</td>
    <td>Name</td>
    <td>Age</td>
  </tr>
</thead>
<tbody>
  <tr v-for="(user, index) in filterUserInfo" :key="index">
    <td>{{ index + 1 }}</td>
    <td>{{ user.DisplayName }}</td>
    <td>{{ user.DisplayAge }}</td>
    <td class="d-flex justify-content-around"></td>
  </tr>
</tbody>

I made this sample data in script.

search:null,
userInfo:[
  { DisplayName:'John', DisplayAge: 20 },
  { DisplayName:'Andrew', DisplayAge: 21 },
  { DisplayName:'Michael', DisplayAge: 22 },
]

Then, here’s how I filter.

computed: {
  filterUserInfo() {
    if(this.search){
      return this.userInfo.filter((item) => {
        return (
          this.search.toLowerCase().split("").every((v) =>
          item.DisplayName.toLowerCase().includes(v)) ||
          this.search == (item.DisplayAge)
        )
      })
    }
    else{
      return this.userInfo
    }
  }
}

And this is how it looks like.

Additional
You should make your function in script not on the template. Also, please attach image/draft of the final output to easily understand what you want to achieve.