I have a data coming from API. It is an array of "houses".

Code looks like this:

<template>
    <div class="search__sort">
        <input v-model="search" placeholder="Search for a house">
        <button class="sort__button">Price</button>
        <button class="sort__button">Size</button>
    </div>    
    <div v-for="house in houses" :key="house.id" class="house">
        <router-link :to="{ name: 'HouseDetails', params: { id: house.id}}" >
            <h2>ID = {{ house }}</h2>
            <h3> {{ house.location.street}} </h3>
            <img :src="house.image" />
                
        </router-link>
        <button v-if="house.madeByMe" class="delete" @click="deleteHouse(house.id)">Delete</button>
    </div>
   
</template>

<script>
import axios from 'axios'


export default {
    name: 'Houses',
 

    data(){
        return {
            houses: [],
        }
    },
    
    created() {
        this.getHouses();
    },

    methods: {

      

        getHouses(){
            // GET request using axios with set headers
            const headers = { "CENSORED": "CENSORED" };
            axios.get('myAPI', { headers })
            .then(response => this.houses = response.data);
        },

        deleteHouse(id) {
            
            const headers = { "CENSORED": "CENSORED" };
            axios.delete('myAPI' + id, { headers })
            .then(response => {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error.response);
            });
                        
        },
    },
   


}
</script>

I somehow need to implement the filter by text input, so that for example, if user types a city name it will show all of those houses or a street name to filter that by street.

Any suggestions how I can do that with code that I already have?