Как получить объект с помощью объекта

Вы не объявляете столбец skillnName в заголовке, только skills:

Пытаться:

export default {
  data () {
    return {
      ...
      headers: [
        { text: 'Sr No', value: 'srno', align: 'center', sortable: true },
        { text: 'Skills',
           value: 'skills', // <---- probably should be skillName
           align: 'center' },
      ],
    }
  },

или

<v-data-table :headers = "headers" :items = "topics" :footer-props = "{'items-per-page-options': [5, 10, 20, 40]}" :items-per-page = "10" item-key = "srno">
   <template v-slot:item.skills = "{ item }"> <!-- <-------- slot name should match header.value -->
       <span>{{ item.skillName || '-' }}</span>
   </template>
</v-data-table>

Кроме того, по вашим данным, вы хотите использовать здесь массив, поэтому вам нужно создать из него что-то для печати. Попробуйте что-то вроде {{ item.Skills.map(s => s.name).join(',') || '-' }} в шаблоне.

Если вам не нужны сложные выражения в шаблоне, у вас есть другие варианты:

• создайте метод для компонента, чтобы он был {{ formatSkills(item) }}
• если элементы являются экземплярами классов, создает метод в классе, поэтому вы можете сделать: {{ item.getSkillsString() }}
• после загрузки ваших данных создайте свойство для каждого элемента с объединенным значением, например:

async fetchData(){
  const items = await loadItems()
  items.forEach(item => item.skillsCsv = item.Skills.map(s => s.name).join(',')
}

Последний обычно является предпочтительным вариантом в Vue, он позволяет вам работать без слота, просто установите новое свойство в объявлении заголовка:

{ text: 'Skills', value: 'skillsCsv', align: 'center' },

Однако обратите внимание, что это не реактивно, если вы добавляете навыки к предмету, вам нужно перестроить реквизит `skillsCsv` вручную (или вы обрабатываете его через сеттер).

Конечно, вы всегда можете использовать Skills прямо в шаблоне:

   <template v-slot:item.Skills = "{ item }">
     <span v-for = "skill in item.Skills" :key = "skill.id">
       {{ skill.name}}
     </span>
   </template>