My vue 3 component

<script setup lang="ts">
import { defineAsyncComponent, ref, Ref } from "vue";
import CookiesHelper from "@/utilities/cookies";
import { Banner as BannerType } from "@/interfaces/Banner";
import { usePackageStore } from "@/store/offers-package";
import { useInitDataStore } from "@/store/init-data";
import useGroupedData from "@/composables/grouped-data";


CookiesHelper.setCookies();

const isLoaded = ref(false);
const dataStore = usePackageStore();
const initDataStore = useInitDataStore();

let selectedApp: unknown;

switch (initDataStore.app) {
  case "app1":
    selectedApp = defineAsyncComponent(() => import("@/pages/app1.vue"));
    break;
  default:
    selectedApp = defineAsyncComponent(() => import("@/pages/app2.vue"));
}

dataStore
  .setDataPackage()
  .then(() => {
    isLoaded.value = true;
  })
  .catch((e: Error) => {
    console.log(e);
  });
</script>

<template>
  <div v-show="isLoaded">
    <component :is="selectedApp"></component>
    <link-tracking></link-tracking>
    <link-tracking></link-tracking>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

I want to understand, if link-tracking component has scoped css, then that css will be loaded only once or twice? how does this actually gets compiled?