Почему Vue js не отображает icon и title указанные в tabs?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdn.tailwindcss.com"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Clone</title>
</head>
<body>
<div id="app" class="flex container h-screen v-full">
<div class="lg:w-1/5 border-r border-lighter lg:px-8 py-2">
<button class="h-12 w-12 hover:bg-lightblue text-3xl text-blue rounded-full">
<i class="fab fa-twitter"></i>
</button>
<div>
<button v-for="tab in tabs" class="hover:text-blue flex items-center px-4 py-2 hover:bg-lightblue rounded-full mr-auto">
<i :class="`${ tab.icon } text-2xl mr-4 text-left`"></i>
<p class="text-lg font-semibold text-left"> {{ tab.title }}</p>
</button>
</div>
</div>
</div>
<script href="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</body>
</html>
JS
new Vue({
el: '#app',
data(){
return {
tabs: [
{icon: 'fas fa-home', title: 'Home', id:'home'},
{icon: 'fas fa-hashtag', title: 'Explore', id: 'explore'},
{icon: 'far fa-bell', title: 'Notifications', id: 'notifications'},
{icon: 'far fa-envelope', title: 'Messages', id: 'messages'},
{icon: 'far fa-bookmark', title: 'Bookmarks', id: 'bookmarks'},
{icon: 'fas fa-clipboard-list', title: 'Lists', id: 'lists'},
{icon: 'far fa-user', title: 'Profile', id: 'profile'},
{icon: 'fas fa-ellipsis-h', title: 'More', id: 'more'}
],
}
}
})
Средний
