Как избавиться от ошибки Mismatching childNodes vs. VNodes?

Question

[Дмитрий Кузнецов]

Добрый вечер.

У меня есть код генерации меню, но почему-то в консоли выдаётся ошибка "Mismatching childNodes vs. VNodes". К сожалению, не совсем понимаю в чём причина - ошибка в логики или в вёрстке (думаю в этом).

Вот, собственно, код:

<template v-for="menu in menus">
   <template v-if="menu.type === 'route'">
      <nuxt-link :to="{ name: menu.route.name, params: menu.route.params }" class="link">
         <icon v-if="menu.icon" :icon="menu.icon" class="w-8"></icon><span>{{ menu.title }}</span>
      </nuxt-link>
   </template>

   <template v-else>
      <a :href="menu.link.href" :target="menu.link.target" class="link">
         <icon v-if="menu.icon" :icon="menu.icon" class="w-8"></icon><span>{{ menu.title }}</span>
      </a>
   </template>
</template>

Ссылки имеют примерно такой вид:

menus: [
      {
        title: 'Мой профиль',
        type: 'route',
        route: {
          name: 'users-login',
          params: {login: 'admin'}
        },
        icon: 'address-card',
        link: null,
      },

      // ...
]

Компонент Icon - это компонент FontAwesome 6 с настройками по умолчанию.

Подскажите пожалуйста, в чём проблема. Заранее спасибо.