Prompt para casos de uso práticos em vue em Vue

"Desenvolva um **tutorial interativo passo a passo** para desenvolvedores front-end que demonstre a criação de um formulário de feedback dinâmico e reativo em Vue.js, otimizado para acessibilidade (WCAG 2.1 AA) e validação em tempo real. O tutorial deve abordar:

1.  **Estrutura do componente Vue (`.vue`)**: Como organizar `template`, `script` e `style` para um formulário complexo.
2.  **Gerenciamento de estado**: Utilização de `v-model` e `data` para capturar e atualizar os dados dos campos (nome, email, tipo de feedback - dropdown, mensagem - textarea, anexo de arquivo opcional).
3.  **Validação de formulário**: Implementação de validação assíncrona para o email (verificando formato e disponibilidade simulada de domínio), validação síncrona para campos obrigatórios e comprimento mínimo/máximo, e exibição clara de mensagens de erro.
4.  **Acessibilidade (WCAG 2.1 AA)**: Uso de atributos ARIA (ex: `aria-describedby`, `aria-invalid`), `label` corretamente associadas, e navegação por teclado (`tabindex`).
5.  **Reatividade e feedback visual**: Mostrar como o formulário se adapta dinamicamente às interações do usuário (ex: desabilitar botão de envio até que o formulário seja válido, exibir spinners durante validação assíncrona, mensagens de sucesso/erro após o envio).
6.  **Simulação de envio de dados**: Como simular uma requisição HTTP (`axios` ou `fetch`) para um backend, tratando sucesso e erro na resposta.
7.  **Testes unitários (Jest/Vue Test Utils)**: Exemplos básicos de como testar a renderização do componente, a interação do usuário e a lógica de validação.

O tutorial deve ser prático, focado em código, e incluir explicações claras sobre as decisões de design e as melhores práticas do Vue.js para formulários robustos e amigáveis ao usuário."