How do I prevent multiple email fields from taking suggestion of just one?

Question

I have a set of email fields. When I start typing in one, it gives me suggestions. Then I select a suggestion, and it gets set for ALL email fields. Is there a way to select email suggestions for just one email field even though there might be several on the page?

It's a vue.js application. Here is the template for the email field:

                <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>

There is an "add" button that allows the user to add more email fields. But I would like them each treated independently when selecting suggested emails from the popup list. Thanks.

EDIT: data and method blocks requested.

    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);
        }
    }