How do I do table filtering?

Question

Vue.js

I don’t understand how data is usually displayed in filtering, that is, I have filtered one field so far to get data, but I don’t understand how to embed it in the main table?

<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Фамилия" v-model="filterItems.last_name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Имя" v-model="filterItems.name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Отчество" v-model="filterItems.patronymic">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="email" v-model="filterItems.email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="phone" v-model="filterItems.phone">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Непосредственный руководитель" v-model="filterItems.immediate_supervisor">
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="selectAll" @click="select"></th>
                    <th v-for="column in data_columns">{{ column.label }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(employee, index) in items" :key="employee.id">
                    <td><input type="checkbox" :value="employee.id" v-model="selected"></td>
                    <td>
                        <a id="show-modal" @click="select_item(index)">{{ employee.last_name+' '+employee.name+' '+employee.last_name }}</a>
                    </td>
                    <td>{{ employee.email }}</td>
                    <td>{{ employee.phone }}</td>
                    <td>{{ employee.immediate_supervisor }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "BaseTable",
        props:[
            'data_table',
            'data_columns'
        ],
        data(){
            return {
                filterItems: {
                    last_name: '',
                    name: '',
                    patronymic: '',
                    email: '',
                    phone: '',
                    immediate_supervisor: '',
                },
                itemsNew: [],
                items: [],
                item:{},
                selected: [],
                selectAll: false,
                showModal: false
            }
        },
        methods: {
            ...
        },
        computed: {
          filterdList: function () {
              let filterItems = this.filterItems;
              this.itemsNew = this._.filter(this.items, function (item) {
//Нужно возвратить еще дополнительные поля типо filterItems.last_name и т.д
                  return item.name === filterItems.name;
              });
          }
        },
        created(){
            const employeeApi = new restApi(this.$props.data_table);
            employeeApi.list().then(response => {
                this.items = response.data;
            }).catch(error => {
                debugger;
            });
        }
    }
</script>