How to execute a function after render?

Question

Vue.js

How to execute a function after render?
There is a list that should (it happened) be formed on the back side and everything was fine until the need to filter the list appeared. The list appears depending on the variables, via v-if in the parent container.
And it seems like nothing like that, but when you change the variables to true, the list appears, but is not filtered. With what it can be connected?
The filter function works through jQuery
Filter:

function filterSelectChildren(selector, filters) {
    let select = $(selector);
    let children = $(select).find('input');
    for (let i = 0; i < children.length; i++) {
        if (filters.indexOf(children[i]) !== -1) {
            let label = children[i].attr('id');
            $(children[i]).parent().hide();
            $(select).find('[for=]' + label).parent().hide();
        }else{
            let label = children[i].attr('id');
            $(children[i]).parent().show();
            $(select).find('[for=]' + label).parent().show();
        }
    }
}

Very large Vue code

new Vue({
    el: '#app',
    data: function () {
        return {
            currentSetting: {},
            firstChildSetting: {},
            secondChildSetting: {},
            firstChild: 'none',
            secondChild: 'none',
            formType: 'none',
            errorMessage: '',
            client: 'none',
            lastRequestResult: null,
        }
    },
    computed: {},
    watch: {
        currentSetting: function (val) {
            if (val.availableOptions !== undefined) {
                if (val.availableOptions.indexOf('children') === -1) {
                    if (this.secondChild !== 'none') {
                        this.secondChildSetting = {};
                        this.secondChild = 'none';
                    }
                }
                if (val.availableOptions.indexOf('child') === -1) {
                    if (this.firstChild !== 'none') {
                        this.firstChildSetting = {};
                        this.firstChild = 'none';
                    }
                }
            }
            let currentSetting = {};
            if (val.availableChild !== undefined && val.availableChild.length > 0) {
                let currentSetting = val.availableChild;
            }
            filterSelectChildren('#codepenSelectFirstChild', currentSetting);
        }
    },
    methods: {
        firstChildOnChange: function () {
            this.formSettingRequest(this.firstChild, 1);
        },
        secondChildOnChange: function () {
            this.formSettingRequest(this.secondChild, 2);
        },
        formTypeOnChange: function () {
            this.formSettingRequest(this.formType);
        },
        formSettingRequest: function (formType, childrenCount = 0) {
            $('.loader').addClass('loader-active');
            fetch('http://site.name/api/v1/getFormConfig?type=' + encodeURIComponent(formType))
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error("Network response was not ok");
                    }
                })
                .then(response => {
                    if (!response.status) {
                        if (this.firstChild !== 'none' || this.secondChild !== 'none') {
                            this.firstChildSetting = {};
                            this.secondChildSetting = {};
                            this.currentSetting = {};
                        }
                        this.errorMessage = 'Данных по этому типу формы нет. Выбирите другой тип формы';
                        return;
                    }
                    this.errorMessage = '';
                    if (childrenCount === 1) {
                        this.firstChildSetting = response.data;
                    } else if (childrenCount === 2) {
                        this.secondChildSetting = response.data;
                    } else {
                        this.currentSetting = response.data;
                    }

                })
                .then(function () {
                    $('.loader').removeClass('loader-active');
                })
                .catch(error => {
                    console.log(error);
                });
        },
        addAttributeValueByIndex: function (index, base) {
            base = base.charAt(0).toUpperCase() + base.slice(1);
            index = parseInt(index);
            switch (index) {
                case 0:
                    return 'firstChildField' + base;
                case 1:
                    return 'secondChildField' + base;
                case 2:
                    return 'currentFormField' + base;
                default:
                    return '';
            }
        },
        clientOnChange: function () {

        }
    }
});

Answer 1

Perhaps the reason is that Vue updates the DOM asynchronously .
By the time where the filterSelectChildren()DOM is called now, it has not yet been updated and there is no table.
Try filtering by the following tick:

Vue.nextTick(function () {
    filterSelectChildren('#codepenSelectFirstChild', currentSetting);
})