Компонент Vuetify select и запрос graphql

Question

Я изучаю vue / vuetify и graphql и использую плагин vue -apollo в своем небольшом приложении. Я создал компонент, содержащий раскрывающийся список vuetify select, который должен вызывать мой локальный экземпляр graphql и извлекать список категорий. Я получаю результат из своего API, но в раскрывающемся списке он показывает [Объект] как элементы раскрывающегося списка. Что я делаю не так? Вот мой код:

<template>
<v-col cols="12" sm="6">
<v-select :items="cats" label="Income Category*" required> </v-select>
</v-col>
</template>

<script lang="ts">
  import Vue from "vue";
  import gql from "graphql-tag";

 export default Vue.extend({
    apollo: {
      incomeCategories: gql`
        query getCategories {
          incomeCategories {
             id
             incomeCategoryName
        }
      }
   `,
  },
  data: function() {
    return {}
  }
});

Опора элемента компонента vuetify select ожидает массив, который довольно очевиден из документации, но как мне получить мои результаты для правильного отображения. Ниже подпись типа для yieldCategory:

type IncomeCategory {
  createdAt: DateTime
  id: String!
  incomeCategoryName: String!
  incomes: [Income]
  updatedAt: DateTime
}

А меня интересуют только id и yieldCategory. Опять же, может кто-нибудь помочь мне с этим?