Vue loses all css and images when computing dynamic route

I am following this course https://vueschool.io/lessons/dynamic-routes and I created a data.json files like this:

{
    "quizzes": [
      {
        "name": "Quiz 1",
        "slug": "quiz-1",
        "image": "1.jpg",
        "id": 1,
        "description":
          "First quiz"
      },
      {
        "name": "Quiz 2",
        "slug": "quiz-2",
        "image": "2.jpg",
        "id": 2,
        "description":
          "Second quiz"
            }
   ]
}

Now I want to create a dynamic route using these data. But when I create the .vue and I navigate in it all the styles and images just disappear, it is like the public folder doesn't work. This is my code:

    <template>
    <h1>{{quiz.name}}</h1>
    <p>{{quiz.description}}</p>
</template>

<script>
import sourceData from '@/data.json'

export default {
    commputed:{
        quizId(){
            return parseInt(this.$route.params.id)
        },
        quiz(){
            return sourceData.quizzes.find(quiz => quiz.id === this.quizId)
        }
    }
}
</script>

The strange thing is that the css is loaded, but it's completely empty (and it's not in the other pages). This is the tree of my documents:

And this is the css loaded in the dynamic route:

In the index.js file I have:

import { createWebHistory, createRouter } from "vue-router";
import Home from "/views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
{
    path: "/quiz/:id",
    name: "quiz.show",
    component: ()=> import("/views/QuizShow.vue")
  }

];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;