Two div elements with same v-if or one wrapper?

Issue

What would you consider best practice in this situation:

<div>
   <div v-if="condition-1">Show something</div>
   <div v-if="condition-2">Show something else</div>
   <div v-if="condition-2">Show some other thing</div>
</div>

or

<div>
   <div v-if="condition-1">Show something</div>
   <div v-if="condition-2">
      <div>Show something else</div>
      <div>Show some other thing</div>
   </div>
</div>

I guess it boils down to how you value the html elements and for me, the first option is how I would prefer to write it as I find the extra div not serving a structural purpose in the second option. How would you argue for or against the two?

[Edit] As shown by the answer below, using a template element to hold the condition is the way to go

Solution

In this case, I would probably use template as a wrapper for the 2 items. It makes more sense in case the 3 items are supposed to be on the same level.

https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt

<div>
   <div v-if="condition-1">Show something</div>
   <template v-if="condition-2"> <!-- Or v-else -->
      <div>Show something else</div>
      <div>Show some other thing</div>
   </template>
</div>

Answered By - Cornel Raiu