Hello every may i have your advice for filtering multiple columns, i have created a filter on search input to filter by columns, luckily my code work only for single column but if i tried to filter on multiple it gaves me blank result without error, i know where the error is somewhere in props filter

**Props **

const props = defineProps({
  title: String,
  isexpanded: Boolean,
  items:Array
})

filtered method

const filteredItems =computed(()=>{
    //return props.items.filter(item=> item.supplier_customer ==="Test") //ok with string  
    //return props.items.filter(item=> item.supplier_customer ===searchFilter.value) //ok with searchfilter  
    //  return props.items.filter(item=> item.acc_no ===6243)   //ok with number/double
    if(searchFilter.value !=''){
        // console.log(searchFilter.value )// search input exist
        // console.log(props.items ) //props items exist
       return props.items.filter(item =>{            
            item.account_name.includes(searchFilter.value)||
            item.supplier_customer.includes(searchFilter.value)
            //console.log(item.supplier_customer.includes(searchFilter.value)) 

             //My error is somewhere here but i dont have any idea what to implement here since the tutorial that i followed in youtube is not on the latest version so i had to modified some of the codes
      
       })  
    }   
    return props.items;
    // console.log(searchFilter.value);
}); 

handleSearch

const searchFilter = ref('');
const handleSearch = (search) =>{
    searchFilter.value = search
    // console.log(search)
};

SearchForm.vue

<script setup>
const emit = defineEmits(['search']);

const search = (e)=>{
    //  console.log(e.target.value)
    emit('search',e.target.value);
}
</script>

<template>
    <input type="text" @input="search" placeholder="Search.." class="border px-2 rounded-md">
</template>

Main Vue

<SearchForm @search="handleSearch"/>

Table Code

<tr v-for="item in filteredItems" :key="item.id" >
       <td></td>
       <td>{{ item.acc_no }}</td>
       <td>{{ item.account_name }}</td>
       <td>{{ item.supplier_customer }}</td>
       <td>{{ item.currency }}</td>


  <!-- <td :class="{ 'text-red-400': entry.original_amount < 0 }">{{ entry.original_amount }}</td> -->
       <td v-if="item.original_amount > 0 " >{{  item.original_amount }} </td>
       <td v-else class="text-red-400">({{ AccFunction.InvertNumber(item.original_amount) }}) </td>
        <td>
        <button class="ml-2 btn btn-xs btn-primary">Details</button>
         <button class="ml-2 btn btn-xs btn-accent">Edit</button>
         <button class="ml-2 btn btn-xs btn-error">Remove</button>
</td>

Props.items contains via vue console

items:Array[4]
0:Reactive
id:1
acc_no:6242
account_name:"Export Sales"
supplier_customer:"SANRITSU LIMITED JAPAN "
desciption:"Sales(JPY) Cav-for the month of July 2022"
currency:"JPY"
original_amount:-322400
created_at:null
updated_at:null
1:Reactive
2:Reactive
3:Reactive