Vue 3 - dynamically bind font awesome icons - vue.js

Question

I have a v-for loop, everything else seems to be working, but for some reason the icon doesn't show up.
How can I bind it correctly?
Note: I also return the icon and import it, and am already using font awesome in my project, so I know it's working. The problem is how I am binding it.
Imports:
import { ref } from '#vue/composition-api'
import {faCircle} from '#fortawesome/free-solid-svg-icons'
v-for loop:
<div
class="m-auto w-full flex flex-col justify-center items-center"
>
<div>
<fa :icon="item.icon" class="text-5xl text-gray-400" />
// the icon isn't showing but when I write {{item.icon}} I can see the text 'faCircle'
</div>
<div class="py-4 text-2xl font-semibold block">
{{ item.title }}
</div>
<div class="px-10">
<span class="text-base">
{{ item.text }}
</span>
</div>
</div>
Script:
export default {
setup() {
const items = ref([
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
},
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
},
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
}
])
I returned the items:
return {
faCircle,
items
}

Answer 1

So I know what the Problem was. I wrote it as a String
Script
export default {
setup() {
const items = ref([
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
},
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
},
{
title: 'bla',
text: 'bla',
icon: 'faCircle'
}
])
ICON should be written WITHOUT Strings because we are importing it inside an expression
{
title: 'bla',
text: 'bla',
icon: faCircle
}