Модальный диалог появляется за модальным фоном

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

В настоящее время я использую фреймворк Laravel Spark, но считаю, что он должен быть универсальным для всех. Это мой HTML.

<spark-tokens :tokens = "tokens" :available-abilities = "availableAbilities" inline-template>
    <div>
        <div>
            ...
            <button class = "btn btn-danger-outline" @click = "approveTokenDelete(token)">
                <i class = "fa fa-times"></i>
             </button>
            ...
        </div>
        ...
        <!-- Delete Token Modal -->
        <div class = "modal fade" id = "modal-delete-token" tabindex = "-1" role = "dialog">
            <div class = "modal-dialog" v-if = "deletingToken">
                <div class = "modal-content">
                    ...
                </div>
            </div>
        </div>
    </div>
</spark-tokens>

Это JS, который я использую для открытия модального окна.

module.exports = {
    ...
    methods: {
        ...
        /**
         * Get user confirmation that the token should be deleted.
         */
        approveTokenDelete(token) {
            this.deletingToken = token;

            $('#modal-delete-token').modal('show');
        },
        ...
    }
};

Я видел проблемы, подобные этой, но ни одно из решений у меня не помогло. Я попытался переместить div "модальное затухание" за пределы охватывающего его div (так что насчет тега). Это привело к тому, что диалоговое окно вообще не отображалось. Я попытался изменить z-index для modal-backdrop, однако не могу найти нужный файл, чтобы изменить это. Есть ли другое решение этой проблемы? Мы будем очень благодарны за любую помощь, которую вы можете оказать. Спасибо!