How to load different templates in a Vue component, leaving the contents of the JS code untouched?

Question

Vue.js

Good day!

I have a Vue component. Depending on the situation, it is necessary to load different template code into the section, while leaving all the JS untouched. You can of course do something like this:

<template>
  <div v-if="situation1">
    (шаблон 1)
  </div>
  <div v-else>
    (шаблон 2)
  </div>
</template>
<script>
  (одинаковый код для обоих шаблонов)
</script>

The problem is that template versions, in addition to having very different layouts, are also large enough to shove them into one file. It's inconvenient to manage it. I would like something like importing by condition. I didn't find it in the dock.
Is there any solution other than the above?

Answer 1

<template>
  <div>
    <component :is="ComponentDependingOnTheCondition">
  </div>
</template>
<script>
  (одинаковый код для обоих шаблонов)
</script>