Vue iterated data not showing

See more:

vue.js

vuejs

I created vue pages to show data from my json file. I'm now having trouble with getting the data to show on my page.

In my mainContainerContent I put this:

<p>{{ skill.frontend.name }} </p>

inside my p element and I expect this result: (https://i.stack.imgur.com/a7x0o.png). But I'm not getting any data back.


When I change it to this:

<p>{{ skill.name }} </p>

I will get this result: (https://i.stack.imgur.com/YB4Bq.png) but I'm still not getting the data from my json file Im expecting to get.


mainContainer.vue:

<template>
  <Skills v-for="skill in skills.skills" :skill="skill" :key="skill.id"/>
</template>

<script setup>
  import Skills from './mainContainerSkills.vue';

  import skills from "../Skills.json";
</script>

<script>
export default {
  props: {
    skills: {
      default: null,
      type: Object,
    }
  }
}
</script>

mainContainerSkills.vue:

<template>
  <div>
    <!-- Frontend -->
    <div>
      <h3>
        Frontend
      </h3>
      <p>{{ skill.frontend.name }} </p>
    </div>

    <!-- Backend -->
    <div>
      <h3>
        Backend
      </h3>
      <p>{{ skill.backend.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    skill: {
      default: null,
      type: Object,
    }
  }
}
</script>

Skills.json:

{
  "skills": [
    {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "Vue"
        },
        {
          "id": "2",
          "name": "HTML",
          "icon": "HTML"
        },
        {
          "id": "3",
          "name": "Javascript",
          "icon": "Javascript"
        },
        {
          "id": "4",
          "name": "Tailwind",
          "icon": "Tailwind"
        },
        {
          "id": "5",
          "name": "Bootstrap",
          "icon": "Bootstrap"
        }
      ],
      "backend": [
        {
          "id": "1",
          "name": "Laravel",
          "icon": "Laravel"
        },
        {
          "id": "2",
          "name": "PHP",
          "icon": "PHP"
        }
      ]
    }
  ]
}

What I have tried:

How could I solve this problem so that I can show the data from the frontend and backend object?