How to tell Vue that the DOM has been updated?

Question

Vue.js

The bottom line is that I created a directive that is needed to hide / reveal a block, a smooth change in height. When you hang it on an element, it creates a div wrapper and transfers all elements from the block to this wrapper, everything works, everything is fine, BUT there is one problem. Vue does not know anything about the existence of this wrapper and problems begin if, for example, dynamically adding an element to an array that is inferred using v-for. Vue simply ignores the blocks created in pure JS and the mess begins.

const HiddenWrapper = document.createElement('div');
const ChildNodes = el.children;

for (const el of [...ChildNodes]) {
   HiddenWrapper.insertAdjacentElement('beforeend', el);
}

A piece of code that creates and transfers blocks.

Is there any way to tell Vue that the DOM has been updated, or would it be easier to do it all through the component and slot?

Answer 1

6 hours without answers and comments)))
1) where did you create the directive? In outside the Vue project or in Vue components?
2) First, let's say everything is terrible, then it seems to me that watch will help you.

if, for example, you dynamically add an element to an array that is output using v-for. Vue simply ignores the blocks created in pure JS and the mess begins.

And secondly, it means that you destroy template with your wrapper. You either complicate the component or somehow separate the logic into components.
Don't create a div, but make it a component and render your dynamic elements in it.
The variable is false - draw there and so.
The variable true - we draw in the wrong place and in a different way.