图标在表列中停止工作

奇怪的事情发生在我的图标上

    <b-table :data="myDir">
        <template slot-scope="props">
            <b-table-column>
                {{ props.row.icon }} <!-- Correct -->
                <i class="fas" :class="'fa-' + props.row.icon"></i> <!-- Wrong -->
                <b-icon :pack="props.row.iconPack" :icon="props.row.icon" :type="props.row.iconType"></b-icon>  <!-- Wrong -->
            </b-table-column>

myDir通过

        watch: {
            path: function () {
                this.getDir();
            }
        },

        mounted () {
            this.getDir();
        },

        methods: {
            getDir : function() {
                console.log("Loading " + this.path);
                axios
                    .get('?path=' + this.path + '&format=json')
                    .then(response => (this.myDir = response.data))
                    .catch(error => {
                        console.log(error)
                        });
            }
        }