Как отловить afterRender-событие модального окна в Vue. js

Question

У меня есть модальное окно, созданное с помощью Vuetify lib:

<v-dialog v-model="dialogFilters" max-width="1000px">
<template v-slot:activator="{ on }">
    <v-btn color="primary" dark class="mb-2 mr-2" v-on="on">Filters</v-btn>
</template>
<v-card>
    <v-card-title>
        <span class="headline">[[ formTitleFilters ]]</span>
    </v-card-title>

    <v-card-text>
        <div id="builder" class="container"></div>
        <v-container>
            <button class="btn btn-success" id="btn-set">Set Rules</button>
            <button class="btn btn-primary" id="btn-get">Get Rules</button>
            <button class="btn btn-warning" id="btn-reset">Reset</button>
            <div style="height: 10px"></div>
        </v-container>
    </v-card-text>

    <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click="closeFilters">Cancel</v-btn>
        <v-btn color="blue darken-1" text @click="saveFilters">Save</v-btn>
    </v-card-actions>
</v-card>

Это модальное окно содержит <div id="builder" class="container"></div>, которое должно использоваться другой JQuery lib (QueryBuilder) визуализировать некоторые элементы. Но Vue каким-то образом скрывает содержимое этого модального окна до его открытия, поэтому мой div id="builder" остается необнаруженным. И я хотел бы получить этот div при открытии модального окна. Но я не мог заставить это работать. Я не могу понять, как перехватить это событие, когда визуализируется модальное окно, и я могу использовать div на нем. Буду признателен за любую помощь. (https://jsfiddle.net/trnvp8qc/)

Answer 1

Я нашел решение в документации: https://vuejs.org/v2/guide/reactivity.html.

Эта функция "Vue .nextTick (callback)" помогла.