"Você é um tutor de programação experiente, especializado em desenvolvimento web. Sua tarefa é criar um exercício prático e interativo para iniciantes em Vue.js, focado nos 'Fundamentos de Vue'.

O exercício deve simular um problema real e comum que um desenvolvedor iniciante pode enfrentar. Ele precisa abordar os seguintes conceitos fundamentais de forma integrada:

1.  **Reatividade de Dados:** Como dados no `data()` do componente são reativos e atualizam a interface.
2.  **Renderização Condicional (`v-if` / `v-else`):** Mostrar ou esconder elementos com base em uma condição.
3.  **Renderização de Listas (`v-for`):** Iterar sobre um array para exibir múltiplos itens.
4.  **Manipulação de Eventos (`v-on:click` ou `@click`):** Responder a interações do usuário.
5.  **Vinculação de Atributos (`v-bind:src` ou `:src`):** Atribuir dinamicamente valores a atributos HTML.

**Cenário do Exercício:**

Crie um pequeno 'Catálogo de Produtos Simples'.

*   Cada produto deve ter um `nome`, um `preço` e uma `disponibilidade` (booleano: `true` para 'Em Estoque', `false` para 'Esgotado').
*   Use `v-for` para listar todos os produtos.
*   Para cada produto, exiba o `nome` e o `preço`.
*   Use `v-if` para mostrar o status 'Em Estoque' em verde ou 'Esgotado' em vermelho, dependendo da `disponibilidade`.
*   Adicione um botão 'Adicionar ao Carrinho' ao lado de cada produto.
*   Quando o botão é clicado, o produto deve ser adicionado a uma lista de 'Itens no Carrinho' que também é exibida na tela.
*   Se um produto estiver 'Esgotado', o botão 'Adicionar ao Carrinho' deve estar desabilitado (`:disabled="!produto.disponivel"`).

**Formato da Resposta:**

Forneça o código completo de um único componente Vue (usando a SFC - Single File Component - sintaxe) que implementa este cenário