Vue 3 CSS files overlapping on component switch

Question

I've imported some CSS files with

<style scoped>@import "../assets/XYZ.css";</style>

in different components. Now whenever I switch components the CSS from the other component is loading as well. Let's say I switch from Home.Vue to Blog.Vue, then Home.Vue's CSS file will be imported into Blog.Vue too. Whenever I refresh, everything seems to be fixed. Adding scoped doesn't seem to work for me.

I am using vue-router to switch between components.

This is my relevant code:

main.js

import './assets/main.css';

^ This is a css file to be used across my website on every component

Home.Vue

<style scoped>@import "../assets/home.css";</style>

Blog.Vue

<style scoped>@import "../assets/blog.css";</style>