diff --git a/CLAUDE.md b/CLAUDE.md index cb789c6..e8194d8 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -370,6 +370,75 @@ const onSubmit = form.handleSubmit(async (values) => { ``` +### **Vue Reactivity Best Practices** + +**CRITICAL: Handling Complex Object Reactivity** + +When working with complex objects from API responses or services, Vue's reactivity system may not always detect changes properly. This is especially common with nested objects or objects from external sources. + +**Common Reactivity Issues:** +- Input components not updating when object properties change +- Template not re-rendering after API responses +- Computed properties not recalculating + +**✅ SOLUTIONS:** + +**1. Force Object Reactivity with Object.assign:** +```typescript +// ❌ DON'T: Direct assignment may not trigger reactivity +createdObject.value = apiResponse + +// ✅ DO: Create new object reference to ensure reactivity +createdObject.value = Object.assign({}, apiResponse) +``` + +**2. Force Component Re-render with Dynamic Keys:** +```vue + + + + + +``` + +**3. Use Safe Navigation and Fallbacks:** +```vue + + +``` + +**When to Apply These Patterns:** +- ✅ API responses stored in reactive refs +- ✅ Complex objects from services +- ✅ Input components showing external data +- ✅ Any scenario where template doesn't update after data changes + +**Example from Wallet Module:** +```typescript +// Service returns complex invoice object +const invoice = await walletService.createInvoice(data) + +// Force reactivity for template updates +createdInvoice.value = Object.assign({}, invoice) +``` + +```vue + + +``` + ### **Module Development Best Practices** **Module Structure Requirements:**