Problemas com o KeepAlive

Olá, Daniel!

O que pode está acontecendo é que o componente <KeepAlive> espera exatamente um único componente filho.

Tente agrupar seus componentes filhos em um elemento pai, como um <template>, e verifique se não há interferência com o código.

<KeepAlive include="SelecionarIngredientes">
  <template v-if="conteudo === 'Selecionar Ingredientes'">
    <SelecionarIngredientes
      @adicionar-ingrediente="adicionarIngrediente"
      @remover-ingrediente="removerIngrediente"
      @buscar-receitas="navegar('MostrarReceitas')"
    />
  </template>

  <template v-else-if="conteudo === 'MostrarReceitas'">
    <MostrarReceitas
      @editar-receitas="navegar('Selecionar Ingredientes')"
    />
  </template>
</KeepAlive>

Dessa forma, o <KeepAlive> sempre terá exatamente um filho, que será o <template> contendo o componente desejado, dependendo da condição avaliada.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Bom dia!

Descobri porque não funcionava. Quando existe um v-if, precisamos garantir para o KeepAlive que apenas um dos componentes será renderizado por vez. Meu código estava assim:

        <KeepAlive include="SelecionarIngredientes">
            <SelecionarIngredientes v-if="conteudo === 'SelecionarIngredientes'"
                @addIngrediente="addIngrediente($event)"
                @removeIngrediente="removeIngrediente"
                @buscarReceitas="navegar('MostrarReceitas')"
            />
            <MostrarReceitas 
                v-if="conteudo === 'MostrarReceitas'" 
                @editarLista="navegar('SelecionarIngredientes')"
            />
        </KeepAlive>

Percebam que tenho dois v-if e isso na prática, funciona, contudo, o KeepAlive não entende assim. Para que funcione, preciso usar um v-else assim:

        <KeepAlive include="SelecionarIngredientes">
            <SelecionarIngredientes v-if="conteudo === 'SelecionarIngredientes'"
                @addIngrediente="addIngrediente($event)"
                @removeIngrediente="removeIngrediente"
                @buscarReceitas="navegar('MostrarReceitas')"
            />
            <MostrarReceitas 
                v-else
                @editarLista="navegar('SelecionarIngredientes')"
            />
        </KeepAlive>

Mas e se eu tiver mais que dois componentes? Aí provavelmente terei que envolver apenas o que precisa ser enviado para o cache com KeepAlive.

Obrigado pela atenção Victor.