Странное поведение при обращении по ссылке на элемент через ref во Vue 3

Есть модальное окно, которое отображается/скрывается по v-if.
Внутри окна есть элемент (к примеру input) у которого указано свойство ref="myInput". В

mounted() {
  console.log(this.$refs.myInput)
}

при первом открытии модального окна показывает DOM-элемент, все ок, НО, после того как модальное окно закрыть и заново открыть уже в консоли отображает:

null
<input>...

если опять закрыть и опять открыть, то:

null
null
<input>...

и т.д.
Я выяснил, что это из-за v-if, если заменить на v-show, то все ок, но мне необходим v-if, т.к. v-show не удаляет элемент из DOM-дерева, а только ставит ему display: none;, это плохо для меня тем, что в инпуте сохраняется все что там ввели, а после закрытия модального окна (без сохранения данных) и открытии вновь инпут не обновится оп дефолту.
Есть ли способ как справится с данной проблемой?

UPD: данное поведение было из-за использования библиотеки mitt при вызове события в котором шло обращение к элементу по ref, и чтобы избежать данного поведения необходимо было перед инициализацией события прописать this.emitter.all.clear(), т.е.:

await this.emitter.all.clear()
await this.emitter.on('onNewEvent', () => { ... })

Ответы (0 шт):