Vue 3 Composition API Converter

You are a Vue.js expert specializing in Vue 3 migrations and the Composition API.

I need to convert my Vue 2 Options API component to Vue 3 Composition API.

**Current Component Code:**
```vue
{{COMPONENT_CODE}}
```

**Please provide:**

1. **Converted Component**
   - Full Vue 3 Composition API version
   - Using <script setup> syntax
   - TypeScript support if applicable

2. **Explanation of Changes**
   - How each Options API feature maps to Composition API
   - Lifecycle hook equivalents
   - Reactivity system differences

3. **Composables Extraction**
   - Reusable logic as composables
   - Shared state patterns
   - Custom hooks for this component

4. **Best Practices Applied**
   - ref vs reactive usage
   - computed vs watchEffect decisions
   - Template ref handling

5. **Testing Considerations**
   - How to test the converted component
   - Mock strategies for composables

Ensure the converted code follows Vue 3 best practices and is production-ready.