Динамические стили в Vue.js

Учитывая следующие фрагменты кода HTML, CSS и Vue, я хотел бы иметь возможность динамически создавать серию классов стилей CSS с использованием вычисляемого свойства в Vue 2 и связывать их с диапазоном, который уже имеет класс значка панели. Как видно из фрагмента CSS, имя класса должно быть в форме .icon - имя инструмента, где имя инструмента берется из свойства toolName в JSON. Когда я пытаюсь сохранить результаты цикла for в переменную и вернуть эту переменную, я получаю только один результат вместо четырех, которые я ожидал. Общая идея заключается в том, что CSS-класс icon должен соответствовать имени инструмента, отображаемому в цикле v-for.

HTML:

<div class = "container" id = "lab">
    <a class = "panel-block" v-for = "tool in tools">
        <span class = "panel-icon" :class = "style">
            <i class = "fas fa-book" aria-hidden = "true"></i>
        </span>
        {{ tool.toolName }}
    </a>
</div>

CSS:

.icon--bulma {
    color: hsl(171, 100%, 41%);
}

.icon--jgthms {
    color: hsl(204, 86%, 53%);
}

.icon--marksheet {
    color: hsl(48, 100%, 67%);
}

.icon--minireset {
    color: hsl(348, 100%, 61%);
}

Vue.js:

new Vue({
    el: '#lab',
    data: {
        tools: [
            {
                toolName: 'bulma'
            },
            {
                toolName: 'marksheet'
            },
            {
                toolName: 'minireset'
            },
            {
                toolName: 'jgthms'
            }
        ]
    },
    computed: {
        style: function () {
            var toolsList = this.tools;
            var toolNameStyle = '';

            for (var i = 0; i < toolsList.length; i++) {
                toolNameStyle = 'icon--' + toolsList[i].toolName;
                console.info('toolNameStyle: ' + toolNameStyle);

                return toolNameStyle;
            }
        }
    }
})