Почему у меня возникает ошибка при обращение к filterBy?

У меня выходит постоянно ошибка

[Vue warn]: Property or method "filterBy" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Хотя мой код примерно такой

<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Фамилия" v-model="filterItems.last_name">
                {{ filterItems.last_name }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Имя" v-model="filterItems.name">
                {{ filterItems.name }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Отчество" v-model="filterItems.patronymic">
                {{ filterItems.patronymic }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="email" v-model="filterItems.email">
                {{ filterItems.email }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="phone" v-model="filterItems.phone">
                {{ filterItems.phone }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Непосредственный руководитель" v-model="filterItems.immediate_supervisor">
                {{ filterItems.immediate_supervisor }}
            </div>
            {{ filterdList }}
        </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 | filterBy in filterItems" :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>
        <pagination></pagination>
        <modal v-if="showModal" @close="showModal = false" :data_employee="item"></modal>
    </div>
</template>

<script>
    export default {
        name: "BaseTable",
        props:[
            'data_table',
            'data_columns'
        ],
        data(){
            return {
                filterItems: {
                    last_name: '',
                    name: '',
                    patronymic: '',
                    email: '',
                    phone: '',
                    immediate_supervisor: '',
                },
                items: [],
                item:{},
                selected: [],
                selectAll: false,
                showModal: false
            }
        },
        created(){
            const employeeApi = new restApi(this.$props.data_table);
            employeeApi.list().then(response => {
                this.items = response.data;
            }).catch(error => {
                debugger;
            });
        }
    }
</script>

<style scoped>

</style>

Просто если брать пример такой https://codepen.io/anon/pen/PERgxa То он прекрасно работает. Почему у меня на локалке не так работает?