[Dúvida] Nao aparece o conteudo de ingredientes

meu projeto nao esta aparecendo o conteudo de categoria

index.ts:

import type ICategoria from "@/interfaces/ICategoria";

export async function obterCategorias(){
    const response = await fetch('https://gist.githubusercontent.com/antonio-evaldo/002ad55e1cf01ef3fc6ee4feb9152964/raw/bf463b47860043da3b3604ca60cffc3ad1ba9865/categorias.json');
    const categorias: ICategoria[] = await response.json();
    return categorias;
}

selecaoIngrediente:

<script lang='ts'>
import { obterCategorias } from '@/http';
import CategoryCard from './CategoryCard.vue';
import type ICategoria from '@/interfaces/ICategoria';

    export default{
        data(){
            return{
                //so sera preenchida apos o retorno da requisição http feita em 'obterCategorias'
                categorias: [] as ICategoria[]
            }
        },
        //logica criada no created so vai ser executada depois das configurações desejadas estiverem cumpridas
        //metodo de ciclo de vida
        async created(){
            //atribuição
            this.categorias = await obterCategorias();
        }
    }
</script>

<template>
    <section class="selecionar-ingredientes">
        <h1 class="cabecalho titulo-ingredientes">
            Ingredientes
        </h1>

        <p class="paragrafo-lg instrucoes">
            Selecione abaixo os ingredientes que você quer usar nesta receita:
        </p>

        <ul class="categorias">
            <li v-for="categoria in categorias" :key='categoria.nome'>
                <!-- passando o valor de categoria para a prop de categoria -->
                <CategoryCard :categoria="categoria" />
            </li>
        </ul>

        <p class="paragrafo dica">
            *Atenção: consideramos que você tem em casa sal, pimenta e água.
        </p>
    </section>

</template>

<style scoped>
.selecionar-ingredientes {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titulo-ingredientes {
  color: var(--verde-medio, #3D6D4A);
  display: block;
  margin-bottom: 1.5rem;
}

.instrucoes {
  margin-bottom: 2rem;
}

.categorias {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dica {
  align-self: flex-start;
  margin-bottom: 3.5rem;
}

@media only screen and (max-width: 767px) {
  .dica {
    margin-bottom: 2.5rem;
  }
}

</style>

cardCategoria:

<script lang="ts">
import type ICategoria from '@/interfaces/ICategoria';
import type { PropType } from 'vue';

    export default{
        props:{
            //fazendo com q essa prop seja informada obrigatoriamente quando for utilizado o componente
            categoria: {type: Object as PropType<ICategoria>, required:true}   
        }
    }
</script>

<template>    
    <article class="categoria">
        <header class="categoria__cabecalho">
            <img class="__imagem" :src="`/imagens/icones/categorias_ingredientes/${categoria.imagem}`" alt="">
            <h2 class="paragrafo-lg categoria__nome">{{ categoria.nome }}</h2>
        </header>

        <ul class="categoria__ingredientes">
            <li v-for="ingrediente in categoria.ingredientes" :key="ingrediente">
                {{ ingrediente }}
            </li>
        </ul>
    </article>
</template>

ICategoria

// Criação de uma "tipagem"
export default interface ICategoria{
    nome: string;
    ingredientes: string[];
    imagem: string;
}