Как сделать так, чтобы несколько полей электронной почты не предлагали только одно?

Question

У меня есть набор полей электронной почты. Когда я начинаю вводить один, он дает мне предложения. Затем я выбираю предложение, и оно устанавливается для ВСЕХ полей электронной почты. Есть ли способ выбрать варианты электронной почты только для одного поля электронной почты, даже если на странице их может быть несколько?

Это приложение vue. js. Вот шаблон для поля электронной почты:

                <v-layout row wrap v-for="(item, index) in prop.roles" :key="index">
                    <v-flex mb-4>
                        <div class="ath-container">
                            <div class="ath-controls-container mb-2">
                                <v-text-field
                                    :id="'email-' + index"
                                    class="d-inline-block ath-email-field"
                                    outline
                                    label="Email"
                                    v-model="item.email"
                                    placeholder="username@example.com"
                                    :rules="[v => !!v || 'Email is required',
                                        v => /.+@.+/.test(v) || 'Email is invalid' ]"
                                    maxlength="255"
                                    required>
...
            </div>
        </div>
    </v-flex>
</v-layout>

Есть кнопка «добавить», которая позволяет пользователю добавлять дополнительные поля электронной почты. Но я бы хотел, чтобы каждый из них обрабатывался независимо при выборе предлагаемых писем из всплывающего списка. Спасибо.

EDIT: запрошены блоки данных и методов.

    data() {
        return {
            isValid: false,
            isCompany: false,
            prop: {
                companyName: null,
                hasAdditionalTitleHolders: null,
                roles: [{
                    email: null,
                    notifying: false
                }],
                isMarried: null,
                hasSpouse: null
            },
            dowerRightsFilenameData: null,
            rafId: 0, // request animation frame ID (see animateStatusBarIfInView() below)
            notifyingAll: false
        }
    }

methods: {
        onDowerRightsFormPicked(e) {
            this.dowerRightsFilenameData = e.target.files[0].name;
            this.$emit('dower-rights-form-picked', e);
        },

        deleteDowerRightsForm() {
            this.dowerRightsFilenameData = '';
            this.$emit('delete-dower-rights-form');
        },

        animateStatusBarIfInView() {
            for (let index = 0; index < this.prop.roles.length; index++) {
                if (this.$refs['ath-status-bar-' + index] && this.$refs['ath-status-bar-' + index][0]) {
                    const athStatusBar = this.$refs['ath-status-bar-' + index][0];
                    const ath = this.prop.roles[index];
                    if (this.isInViewport(athStatusBar)) {
                        let className = 'ath-status-bar-init';
                        if (ath.acceptedAt) {
                            className = 'ath-status-bar-accepted';
                        } else if (ath.verifiedAt) {
                            className = 'ath-status-bar-verified';
                        } else if (ath.accountCreatedAt) {
                            className = 'ath-status-bar-account-created';
                        } else if (ath.invitedAt) {
                            className = 'ath-status-bar-invited';
                        }
                        athStatusBar.classList.add(className);
                    }
                }
            }

            // repeat:
            if (this.rafId) window.cancelAnimationFrame(this.rafId);
            this.rafId = window.requestAnimationFrame(this.animateStatusBarIfInView);
        },

        isInViewport(element) {
            const rec = element.getBoundingClientRect();
            return rec.top < (window.innerHeight || document.documentElement.clientHeight) && rec.bottom > 0;
        },

        notifyAllAths() {
            this.notifyingAll = true;
            let index = 0;
            const allIndexes = this.prop.roles.map(ath => index++);
            this.$emit('notify-aths', allIndexes);
        }
    }