Render conflict between VueJS and Semantic UI - how to resolve?

Question

JavaScript

So it goes.
The project is under NDA, so I can't show anything.
The problem is this: there is a modal window in which rows are displayed in the table. These lines contain different input, textarea, checkbox, select, etc., each of which is styled using Semantic UI.
When I launch a modal window, VueJS fills this table with v-for, and some elements with v-if
As I understand it, first the semantic creates the modal window and elements, and then VueJS renders the lists.
As a result, the modal window is incorrectly calculated in its height (influence of list rendering). This is fixed when the window is resized, i.e. When resizing, Semantic again calculates the parameters of the modal window and calculates everything correctly with the ready list.
The same problem with rendering elements: first Semantic distributes styles to them, but since v-if does not initially show these elements, Semantic does not see them either. And then VueJS renders and, as a result, everything is rendered in the browser's native styles (what is rendered using JS).
How to be in this situation?

Answer 1

Maybe try v-show instead of v-if?