fix: routing is not working & ionicons not importing correctly

🐛 The bug

routing is absolutely broken with me, in addition to the issue that nothing works unless i install @ionic/vue
and icons are not importing correctly

icons error:

what happens when I change tabs:

as you can see the tabs just get displayed together

if I change tabs again this comes in the console:

app.vue:

<template lang="pug">
ionApp
  UiTabs
</template>

components/Ui/Tabs.vue:

<template lang="pug">
ionPage
   ionTabs
      ionRouterOutlet
      //- https://ionicframework.com/docs/vue/navigation#working-with-tabs
      ionTabBar(slot="bottom")
         ionTabButton(tab="home" href="/tabs/home")
            ionIcon( :icon="ioniconsHome" )
            ionLabel Home
         ionTabButton(tab="schedule" href="/tabs/schedule")
            ionIcon( :icon="ioniconsCalendar" )
            ionLabel Schedule
</template>

pages/tabs/Home.vue

<template lang="pug">
h1 this is the home tab
</template>

pages/tabs/Schedule.vue

<template lang="pug">
h1 this is the schedule tab
</template>

🛠️ To reproduce

https://github.com/NyllRE/ionic-nuxt-3

🌈 Expected behaviour

• tabs change correctly
• icons get imported and displayed

ℹ️ Additional context

I tried to remake the project multiple times and these errors keep coming, I install @nuxtjs/ionic and no component is known, I install @ionic/vue and the routing is broken, I install @ionic/vue-routing and the ionicons are not working and the routing is broken. nothing seems to be working fine with my experience

Start with the linked ionic-nuxt-3 reproduction and inspect app.vue and components/Ui/Tabs.vue, then check pages/tabs/Home.vue and pages/tabs/Schedule.vue. Reproduce the tab changes and icon errors, and consider the issue done when both tabs route separately and both icons import and display correctly.