Children of NuxtLink rendered twice (hydration error?)

My hunch is that there is some hydration mismatch where the FontAwesomeIcon was not rendered on the server (only the span) and then on the client both child nodes of the NuxtLink were rendered (the svg and the span), prompting Nuxt to render the span twice.

The console does not return an error, though.

Any thoughts on how to debug this?

This is the Vue component:

<template>
  <ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
    <li v-for="(item, i) in routes" :key="item.name">
      <NuxtLink :to="item.path" target="_blank">
        <FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
        <span>{{ item.title }}</span>
      </NuxtLink>
    </li>
  </ul>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    links: {
      type: Array,
      default: () => ["instagram", "facebook", "email"],
    },
  },
  computed: {
    routes() {
      return [
        {
          name: "instagram",
          path: "https://www.instagram.com/insta.name/",
          title: "Instagram",
          icon: ["fab", "instagram"],
        },
        {
          name: "facebook",
          path: "https://www.facebook.com/fb.name",
          title: "Facebook",
          icon: ["fab", "facebook"],
        },
        {
          name: "email",
          path: "mailto:hello@example.com",
          title: "Email",
          icon: ["fas", "envelope"],
        },
      ].filter((e) => this.links.includes(e.name));
    },
  },
});
</script>

The cleanest solution I have come across is this: transpile the @fortawesome/vue-fontawesome package in your nuxt.config.ts:

// nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: [
      '@fortawesome/vue-fontawesome',
    ]
  },
  // ...
})

The solution was posted here: https://github.com/nuxt/nuxt/discussions/16014#discussioncomment-2477885.

Note: I found that it's enough to transpile @fortawesome/vue-fontawesome.