我想让下面的菜单类似于VK，在那里你点击图标和内容的变化。我实现了不同的内容，但我不能使每个标签有自己的图标。
我提供了一个截图和代码。不要注意风格，我首先需要了解使用Vue CLI的逻辑。

<template>
    <div id="app">
        <font-awesome-icon 
            icon="user-secret" 
            v-for="tab in tabs" 
            :key='tab' 
            @click="currentTab = tab" 
            :class="['tab-button', {active: currentTab === tab}]"
        > 
            {{ tab }}
        </font-awesome-icon>
    
        <component v-bind:is="currentTabComponent"></component>
    </div>
</template>
    
<script>
import Posts from './Posts.vue'
import List from './List.vue'
    
export default {
    data () {
        return {
            currentTab: 'Posts',
            tabs: ['Posts', 'List'],
            icon: 'bell'
        }
    },
    components: {
        tabPosts: Posts,
        tabList: List
    },
    computed: {
        currentTabComponent() {
            return 'tab-' + this.currentTab.toLowerCase()
        }
    }
}
</script>
    
<style scoped>
body {
    overflow: auto;
    padding: 0;
    margin: 0;
}
    
#app {
    position: relative;
    width: 320px;
    height: 400px;
    border:  solid 1px black;
}
.tab-button.active {
    position: relative;
    color: red;
    height: 50px;
    width: 50px; 
}
    
.tab-button {
    position: relative;
    float:  right;
    bottom: 10px;
    height: 50px;
    width: 50px; 
}
</style>