Как отловить событие загрузки разметки во Vue.js?

Question

[vetsmen]

У меня есть несколько блоков

<div v-if="stage == 0">
...
</div>
<div v-else-if="stage == 1">
<div class="elem"></div>
...
</div>

// при каком-то событии делаю:
this.stage = 1;
let elem = document.querySelector('.elem');

Проблема в том, что в таком случае я получаю вместо elem значение null, ибо элемента еще нет в DOM дереве. Если я инициализирую его через 100ms (с помощью setTimeout), то все прекрасно работает.
Я понимаю, что setTimeout это жуткий костыль, хотелось бы отлавливать какой-нибудь встроенный во Vue.js эвент загрузки дерева. Как это можно сделать?

Answer 1

[0xD34F]

Есть такая штука - nextTick. С ёё помощью можно вызвать функцию после обновления DOM-дерева. Т.е., делайте так:

this.stage = 1;
this.$nextTick(() => {
  const elem = document.querySelector('.elem');
  ...
});