Conditionally wrap a vue 3 element

In Vue 3, how can an element be conditionally wrapped rather than creating two seperate blocks with v-if directive?

I have a simplified example here, but the question deals with conditional wrapping. There are a few issues here, in the html block there is a lot of coupling with state in the script setup block, so abstracting that to a child component is more trouble than it’s worth. There would be mixed state and it would be a mess having to deal with emitting data from child to parent. Second, because of the size of the html block, creating manual render functions would also be a mess.

The below code does work, but there is a big block that is duplicated just because I need an extra wrapper. Note that this question is not about how css could be used to fix this.

<script setup>
const isMobile = ref(true)
</script>

<template>
  <div v-if="isMobile" class="mobile-wrapper">
    <div class="product-meta">
      <!-- long html block tightly coupled with script setup block -->
    </div>
  </div>
  <div v-else class="product-meta">
    <!-- same html block -->
  </div>
</template>