Vue3 component can no longer be used directly in another component

Describe the bug When using the <font-awesome-icon> as a direct child in your template, it will throw an error when its state should be changed.

Tagging @otijhuis here has #250 seems to be the root cause.

Reproducible test case This is my wrapper component, which includes the :key workaround:

<template>
  <font-awesome-icon
    :key="version"
    :fixed-width="!noFixedWidth"
    :icon="icon"
    :spin="spin"
    v-bind="$attrs"/>
</template>

<script lang="ts">
import {defineComponent, ref, watch} from 'vue';

export default defineComponent({
  name: 'SimpleIcon',
  props: {
    icon: {
      type: [String, Array],
      required: true,
    },
    spin: Boolean,
    noFixedWidth: Boolean,
  },
  setup(props) {
    const version = ref(0);
    watch(props, () => version.value++, {deep: true});

    return {
      version,
    };
  },
});
</script>

It triggers the following error whenever I update any prop of the SimpleIcon property:

When I change my component to have a wrapper element around the font-awesome-icon, such as a simple span, the error disappears and it works as expected. It also no longer needs the :key hack for the reactivity to work.

Expected behavior There shouldn’t be an error.

Desktop (please complete the following information):

• Edge 91 (Windows)
• 3.0.0-4

Additional context This error didn’t happen with 3.0.0-3

[otijhuis]

Seems that was indeed the issue.

Not sure if it’s the best solution but this works:

return () => h(() => vnode.value)

Something like that is probably what happens when font-awesome-icon is wrapped by SimpleIcon. Tried it in my test application and both SimpleIcon and font-awesome-icon work with v-show now.

FontAwesomeLayersText.js had the same issue as well.

I’ll see if I can add a few v-show tests and create a PR with the fix.

EDIT:

Might be best to change the title of the issue to include v-show so it’s easier to find.

[otijhuis]

I couldn’t create a failing test. Maybe the issue was introduced after 3.0.0 which is the current dev dependency.

Created a PR (#315) which should fix the issue.

Maybe you could test the PR by checking out the code from my repo, switch to the 3.x branch, and setting the vue-fontawesome version to “file:…/some/location/vue-fontawesome”.