v-forを使ってリンク付きボタンを出力したいが、アイコン表示・URL設定ができない

Nuxt.jsとVue.jsを勉強し始めたのですが、ちょっと詰まってしまったので、ご回答頂けましたら幸いです。

v-forを使い、テキストとリンクを別々に管理しながらSNSアイコンを横並びで表示させたいのですが、DOMではbuttonとaタグは出力されており、ホバーすると何かがあることはわかるものの、指定したアイコン・リンクらが共に設定できません。

vue
1<template>
2  <v-app id="app">
3    <v-card class="overflow-hidden">
4      <v-app-bar
5        absolute
6        color="#6A76AB"
7        dark
8        shrink-on-scroll
9        prominent
10        src="https://picsum.photos/1920/1080?random"
11        fade-img-on-scroll
12        scroll-target="#scrolling-techniques-4"
13      >
14        <template #img="{ props }">
15          <v-img
16            v-bind="props"
17            gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
18          ></v-img>
19        </template>
20
21        <v-app-bar-nav-icon></v-app-bar-nav-icon>
22
23        <v-toolbar-title>
24          Norika's Test Project for Nuxt.js n Vuetify
25        </v-toolbar-title>
26
27        <v-spacer></v-spacer>
28
29        <v-btn icon>
30          <v-icon>mdi-magnify</v-icon>
31        </v-btn>
32
33        <v-btn icon>
34          <v-icon>mdi-heart</v-icon>
35        </v-btn>
36
37        <v-menu bottom left>
38          <template #activator="{ on, attrs }">
39            <v-btn icon color="yellow" v-bind="attrs" v-on="on">
40              <v-icon>mdi-dots-vertical</v-icon>
41            </v-btn>
42          </template>
43
44          <v-list>
45            <v-list-item v-for="(item, i) in items" :key="i">
46              <v-list-item-title>{{ item.title }}</v-list-item-title>
47            </v-list-item>
48          </v-list>
49        </v-menu>
50      </v-app-bar>
51      <v-sheet
52        id="scrolling-techniques-4"
53        class="overflow-y-auto"
54        max-height="600"
55      >
56        <v-container style="height: 150px"></v-container>
57        <Nuxt />
58        <v-container style="height: 1000px"></v-container>
59      </v-sheet>
60    </v-card>
61
62    <v-footer padless>
63      <v-card width="100%" class="indigo lighten-1 white--text text-center">
64        <v-card-text>
65          <v-btn
66            v-for="(icon, index) in icons"
67            :key="index"
68            class="mx-4 white--text"
69            icon
70          >
71            <a :href="icons.url" target="_blank">
72              <v-icon size="24px">
73                {{ icons.icon }}
74              </v-icon>
75            </a>
76          </v-btn>
77        </v-card-text>
78
79        <v-divider></v-divider>
80
81        <v-card-text class="white--text">
82          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
83        </v-card-text>
84      </v-card>
85    </v-footer>
86  </v-app>
87</template>
88
89<script>
90export default {
91  data() {
92    return {
93      icons: [
94        {
95          icon: 'mdi-facebook',
96          url: 'https://www.facebook.com/',
97        },
98        {
99          icon: 'mdi-twitter',
100          url: 'https://twitter.com/',
101        },
102        {
103          icon: 'mdi-instagram',
104          url: 'https://www.instagram.com/',
105        },
106      ],
107      clipped: false,
108      drawer: false,
109      fixed: false,
110      items: [
111        {
112          icon: 'mdi-apps',
113          title: 'Welcome',
114          to: '/',
115        },
116        {
117          icon: 'mdi-chart-bubble',
118          title: 'Inspire',
119          to: '/inspire',
120        },
121      ],
122      miniVariant: false,
123      right: true,
124      rightDrawer: false,
125      title: 'Vuetify.js',
126    }
127  },
128}
129</script>
130