Как запустить компонент в родительском vue?

Я использую Laravel 6 (смесь) + Vue.js 2.

Я создаю многоязычный словарь, в который пользователи могут добавлять слова, и для каждого слова они могут добавлять несколько определений со своими переводами.

Внутри index.blade.php

<div class="modal fade" id="modal-addItem">
    <form>
        <div class="card" v-for="(value, index) in nbDefinitions">
            <div class="card-header">@{{ value }}.</div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-sm-3">English</dt>
                    <dd class="col-sm-9">
                        <autocomplete data-language="english" :search="searchDefinition" :get-result-value="getDefinitionResultValue" @submit="handleSearchDefinitionSubmit"></autocomplete>
                    </dd>
                    <dt class="col-sm-3">French</dt>
                    <dd class="col-sm-9">
                        <autocomplete data-language="french" :search="searchDefinition" :get-result-value="getDefinitionResultValue" @submit="handleSearchDefinitionSubmit"></autocomplete>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="row">
            <button type="button" class="btn btn-primary" id="addItems-addDefinition" @click="addDefinition">+ Add definition</button>
        </div>
    </form>
</div>

Внутри myCustom.js

new Vue({
    el: '#modal-addItem',
    data:  {
        nbDefinitions: 0,
        nbSentencesPerDef: [],
        translatedDefinitions: []
    },
    methods: {
        addDefinition: function() {
            this.nbDefinitions++;
            this.nbSentencesPerDef.push(1);
            this.translatedDefinitions.push({
                english: null,
                french: null
            });
        },
        searchDefinition: function (input) {
            // How can I know which <autocomplete> is triggered?
            return new Promise(resolve => {
                if (input.length < 3) { return resolve([]); }
                fetch(`/api/v1/definitions?search=${encodeURI(input)}`)
                .then(response => response.json())
                .then(responseJson => {
                    resolve(responseJson.definitions);
                })
            })
        },
        getDefinitionResultValue: function(result) {
            // How can I know which <autocomplete> is triggered?
            let definition = result.definition;
            let item = result.item.name;
            return `${item} - ${definition}`;
        },
        handleSearchDefinitionSubmit: function(result) {
            // How can I know which <autocomplete> is triggered?
            console.log(this);
        }
    }
});

Я использую autocomplete, который является внешним компонентом, загружаемым глобально (в основном app.js Laravel) https://autocomplete.trevoreyre.com/#/

Мой вопрос: как я могу узнать внутри методов «addDefinition», «searchDefinition» и «handleSearchDefinitionSubmit», какой дочерний компонент был запущен? Поскольку у меня есть 3 компонента автозаполнения внутри моего объекта Vue, а this относится к корню (в моем случае модальное html), поэтому я понятия не имею, какой дочерний элемент автозаполнения был запущен. Также this.$refs пуст.

Может быть, это архитектурная проблема, но у меня недостаточно опыта, чтобы понять, как это сделать.