How to get rid of Mismatching childNodes vs. VNodes in NuxtJs

Question

Getting > Mismatching childNodes vs. VNodes: when I am putting two li elements in else or if condition, as follows.

<ul class="nav navbar-nav language">
  <li><nuxt-link :to="switchLocalePath('en')"> <img src="~/assets/images/english.svg"> English</nuxt-link></li>
  <li><nuxt-link :to="switchLocalePath('ar')"> <img src="~/assets/images/arabic.svg"> العربية</nuxt-link></li>
  <li><nuxt-link to="#"> | </nuxt-link></li>
  <template v-if="$auth.loggedIn">
    <li><nuxt-link to="/profile"> Profile </nuxt-link></li>
  </template>
  <template v-else>
    <li><nuxt-link to="/signin"> Sign In </nuxt-link></li>
    <li><nuxt-link to="/signout"> Sign Out </nuxt-link></li>
  </template>
</ul>

Is it allowed to use more than one li element in the template tag using if/else? If not then how can I achieve this task?

Updated: If I am wrapping my whole ul into client-only, this hides the error.

<client-only>
  <ul>
   ....
  </ul>
</client-only>

Is it OK, or are there any other best practices?