refactor tile component

src/home/Home.vue

@@ -4,17 +4,17 @@
     <template v-else>
       <div v-for="section in sections" :key="section.key" class="mb-4">
         <h1>{{ section.name }}</h1>
-        <Tiles :items="$data[section.key]" v-slot="{ item }" square>
-          <div class="text-truncate">
-            <router-link :to="{name: 'album', params: { id: item.id } }">
-              <strong>{{ item.name }}</strong>
-            </router-link>
-          </div>
-          <div class="text-truncate text-muted">
-            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-              {{ item.artist }}
-            </router-link>
-          </div>
+        <Tiles square>
+          <Tile v-for="item in $data[section.key]" :key="item.id"
+            :image="item.image"
+            :to="{name: 'album', params: { id: item.id } }"
+            :title="item.name">
+            <template v-slot:text>
+              <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+                {{ item.artist }}
+              </router-link>
+            </template>
+          </Tile>
         </Tiles>
       </div>
     </template>