Transforms using computed property do not update on icon

[troncoso]

Describe the bug

I have some icons in a layered icon to depict the position of some elements. It looks like this:

<layered-icon>
    <icon icon="desktop" size="2x" />
    <icon icon="long-arrow-alt-right" :transform="arrowTransforms" />
    <icon icon="ellipsis-v" :transform="iconTransforms" />
</layered-icon>

The transforms on it move the position of the arrow and ellipsis icon. Here are the computed functions:

computed: {
        arrowTransforms(): string {
            let t = 'right-8';
            if (this.positionTop) {
                t += ' up-6';
            }

            return t;
        },
        iconTransforms(): string {
            let t = 'shrink-6 right-20';
            if (this.positionTop) {
                t += ' up-6';
            }
            return t;
        }
    }

As you can see the transform up-6 is conditionally added based on the prop positionTop. When first displaying the icon, everything is rendered in the same place, but clicking a button to change the positionTop property does not redraw the icons so they show in the correct position

Reproducible test case
The problem can be seen here:
https://codesandbox.io/s/vuejs-font-awesome-1--getting-started-forked-ueu4b

If you manually change App.positionTop to true or false, you'll see the icons move where they are suppose to

Expected behavior
When the positionTop prop value changes, the position of the icons should change as well.

Desktop (please complete the following information):

• Browser: chrome
• Version: 88.0.4324.150

[christhofer]

Also see #250

[troncoso]

Note that I can't get this working with the workaround mentioned on #250 (using the :key attribute)