我正在构建一个使用vue-router的Vue3应用程序。我初始化了<router-view />组件和必要的router-links。当我单击<router-link>元素时，我被带到相应的页面，但我使用的JavaScript模块（apexcharts，fontawesome，...）没有加载。
<i>元素就是这样一个例子，fontawesome包应该将其呈现为一个图标，下面是我的源代码片段，我在其中使用了这个元素：

<i class="ti-trash"></i> Cancel

使用ChromeDevTools可以在HTML中找到<i>元素，但它没有呈现为图标，这是我希望发生的事情。
下面是我的源代码的相关片段：
main.js：

import { createApp } from 'vue'
import Dashboard from '@/components/Dashboard.vue'
import InstanceCreationForm from '@/components/InstanceCreationForm.vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from "@/App.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Dashboard
    },
    {
      path: '/create-instance',
      component: InstanceCreationForm
    }
  ]
})

const app = createApp(App)

app.use(router)
app.mount('#app')

Dashboard.vue：

<template>
    <main-template>
        <template v-slot:content>
            <router-link to="/create-instance">
                Add New
            </router-link>
        </template>
    </main-template>
</template>


<script>
import "../js/vendors.min.js" //  <--  Contains jQuery, fontawesome
import "../assets/icons/feather-icons/feather.min.js"
import "../assets/vendor_components/apexcharts-bundle/dist/apexcharts.js"
import "../js/demo.js"
import "../js/jquery.smartmenus.js"
import "../js/menus.js"
import "../js/template.js"
import "../js/pages/dashboard.js"

import MainTemplate from "@/components/MainTemplate.vue";

export default {
    name: "Dashboard",
    extends: MainTemplate,
    components: {MainTemplate}
    metaInfo: {
        script: [
            {src: "https://cdn.amcharts.com/lib/4/core.js", async: true, defer: true},
            {src: "https://cdn.amcharts.com/lib/4/charts.js", async: true, defer: true},
            {src: "https://cdn.amcharts.com/lib/4/themes/animated.js", async: true, defer: true},
        ]
    }
}
</script>

InstanceCreationForm.vue：

<template>
    <main-template>
        <template v-slot:content>
            <router-link to="/" id="cancel-button" type="button">
              <i class="ti-trash"></i> Cancel
            </router-link>
        </template>
    </main-template>
</template>

<script>
import MainTemplate from "@/components/MainTemplate.vue";

export default {
    name: "InstanceCreationForm",
    components: {MainTemplate},
    extends: MainTemplate,
}
</script>

我可以通过使用锚标记（<a>）在路由之间重定向来解决这个问题，但是每次用户移动页面时重新加载整个页面感觉效率很低。我能找到的唯一其他解决方案是在页面加载时强制重新加载组件，这也能有效地做同样的事情。
为什么我的JavaScript包在vue-router重定向时无法加载？