Модальный элемент UIkit не удаляется из DOM при уничтожении родительского компонента (Vue. js)

Question

Я использую модал UIKit в своем приложении Vue.

UIkit.modal(element).show(); // adds class uk-open and style="display:block"
UIkit.modal(element).hide(); 

Скрыть - просто удаляет класс uk-open и style = "display: block" . Я заметил, что даже после уничтожения родительского компонента модального элемента, модальный элемент остается в DOM. Я также заметил, что на show модальный элемент перемещается в самый низ тела непосредственно перед тегом end body. При первой загрузке он будет в том месте, где он объявлен внутри компонента. (Может ли это быть причиной того, что он не был виден и, следовательно, не удален?) Проблема возникает, когда я перехожу на другой компонент и обратно go, чтобы открыть компонент с модальным в качестве дочернего компонента и снова вызвать показ. Модальные элементы в DOM накапливаются и не удаляются.

Один из обходных путей, который я попробовал, - вместо кнопки, запускающей показ, я добавил условие, и если оно возвращает true, элемент будет добавлен в DOM и триггер шоу.

    <field-form-modal
        v-if="showModal"
        .....
    />

    watch: {
    showModal(show) {
        if (show) {
            UIkit.modal('#field-form-modal').show();
        }
    }
},

Однако к тому времени, когда я достигну этой строки: UIkit.modal ('# form-field-modal'). Show (); . Элемент еще не в DOM. Таким образом, я получаю эту ошибку: Невозможно прочитать свойство 'show' из неопределенного . Если мое предположение верно, я думаю, оно будет добавлено только после функции часов showModal.

Есть предложения, как это исправить? Спасибо!