字体超赞类不会根据Vue.js中的条件进行切换

Question

我只有一个元素，可以在点击时打开和关闭

<div class="folderItemHeader" :class="{ bold: isFolder }" @click="toggleChild(item)" :title="item.name">
          <span v-if="isFolder" style="color: Tomato;">
            <!-- LINE 1 <i :class="['fas', item.show ? 'fa-folder-open' : 'fa-folder']" :key="item.show"></i>                -->
            <i class="fas fa-folder-open" v-if="item.show"></i>
            <i class="fas fa-folder" v-if="!item.show"></i>
          </span>
          {{ item.name }} {{ item.show }}
</div>

第一次正确渲染 但是，当我第一次单击任何内容时，什么也没有发生（它应该显示另一个图标） 当我再次单击时，它将添加一个新元素

当我取消注释LINE1时，它以正确的格式显示所有图标（第一个图标处于打开状态，其他子项最初处于关闭状态），但此后没有任何更新。

请注意，item.show的true和false值实际上会更新

只需添加更多信息，Vue.js就不会出现问题，因为使用我的自定义类而不是令人赞叹的字体效果很好

<span v-if="isFolder" style="color: Tomato;">
    <i :class="[item.show ? 'showClass' : 'dontShowClass']">My Data</i>
</span>

我全部导入到index.js中。

// "@fortawesome/fontawesome-free": "^5.13.0"
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

我需要更新我的webpack.js吗？