How to preserve element order in Vue when applying v-if?

Question

Vue.js

Hello!
There is such code and sometimes you need to hide some tabs:

<ul>
<li>1</li>
<li v-if="isVisible">2</li>
<li>3</li>
<ul>

I change to isVisible= false and back to true and the order changes (((

<ul>
<li>1</li>
<li>3</li>
<li v-if="isVisible">2</li>
<ul>

How to avoid it? I tried :key to specify and does not help (((

Answer 1

I change to isVisible= false and back to true and the order changes

Yes, well ? You are clearly missing something.

Answer 2

It turned out that the matter was in the uiv and Tabs component. Rewrote the component and everything worked as it should