как заставить el-select и v-model работать вместе при извлечении настраиваемого компонента

Я использую el-select для создания выбранного компонента. Что-то вроде этого:

<template>
    //omitted code
    <el-select v-model="filterForm.client"
                    filterable
                    remote
                    placeholder="Please enter a keyword"
                    :remote-method="filterClients"
                    :loading="loading">
                <el-option
                        v-for="item in clientCandidates"
                        :key="item._id"
                        :label="item.name"
                        :value="item._id">
                </el-option>
            </el-select>
</template>
<scripts>
    export default {
        data() {
           filterForm: {
                client: ''
           },
           clientCandidates: [],
           loading: false
        },
        methods: {
            filterClients(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.clientCandidates = [{_id: '1', name: 'foo'}, {_id: '2', name: 'bar'}];
                    }, 200);
                } else {
                    this.clientCandidates = [];
                }
            }
        }
    }
</scripts>

Пока все хорошо, но поскольку компонент будет отображаться на разных страницах, я хочу извлечь пользовательский компонент, чтобы избежать дублирования.

Согласно руководству,

v-model="fullName"

эквивалентно

v-bind:value="fullName"
v-on:input="$emit('input', $event)"

Итак, я извлек компонент выбора следующим образом:

<template>
<el-select
        v-bind:value="clientId"
        v-on:input="$emit('input', $event)"
        placeholder="Filter by short name"
        filterable="true"
        remote="true"
        :remote-method="filter"
        :loading="loading">
    <el-option
            v-for="item in clients"
            :key="item._id"
            :label="item.name"
            :value="item._id">
    </el-option>
</el-select>
</template>
<scripts>
export default {
    props: {
        clientId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            clients: [],
            loading: false,
        }
    },
    methods: {
        filter(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.clients = [{_id: '1', name: 'foo'}, {_id: '2', name: 'bar'}];
                }, 200);
            } else {
                this.clients = [];
            }
        }
    }
}
</scripts>

А родительский компонент выглядит так:

<select-client v-model="filterForm.clientId"></select-client>

Выпадающий список выбора работает нормально, но, к сожалению, при выборе не отображается выбранный мной вариант, он остается пустым после того, как я выберу вариант. Я подозреваю, что, может быть, мне стоит переключить v-on:input на 'v-on: change', но это тоже не работает.

ОБНОВЛЕНИЕ Я создал простой пример, вы можете его клонировать здесь, пожалуйста, проверьте ветку el-select-as-component. Бегать

npm install
npm run dev

Вы увидите простую страницу с 3 видами выбора:
Левая - это настраиваемый компонент, написанный на необработанном выборе, он работает нормально.
Средняя - это настраиваемый компонент, написанный на el-select, раскрывающийся список остается пустым, но вы можете увидеть filterForm.elClientId в консоли после того, как нажмете кнопку Filter. Вот почему я задаю этот вопрос.
Правильный - простой el-select, он отлично работает.