Loop propagation to adjacent Vue.js blocks?

Question

Vue.js

<div v-if="type == 0" v-for="item in items" class="item" key="item">
...
</div>
<div v-else class="cats item" key="cats">
...
</div>

Why do I have blocks with the "cats" key displayed in the cycle that is written in the first block when changing the type? And the fact is that I have access to item from it.
How can I make this "item" loop not refer to "cats"?

Answer 1

Well, obviously v-for has higher precedence, so it's done in both cases.
What to do? Add a v-forwrapper to the element, into which you transfer the v-if.

Answer 2

This is why the style guide recommends avoiding v-if with v-for.