Vue.js 3 Component Template

Generate a Vue 3 component template with:

Component Name: {{COMPONENT_NAME}}
Component Type: {{COMPONENT_TYPE}}
State Management: {{STATE_MANAGEMENT}} (Pinia/Vuex/Composables)
Styling: {{STYLING}} (Scoped CSS/Tailwind/SCSS)

Create a complete component including:

1. **Script Setup (Composition API):**
   - TypeScript with defineComponent or <script setup>
   - Props with runtime validation
   - Emits with type definitions
   - Reactive state with ref/reactive
   - Computed properties
   - Watchers with proper cleanup
   - Lifecycle hooks

2. **Template:**
   - Semantic HTML structure
   - v-bind and v-on shorthand usage
   - Conditional rendering (v-if/v-show)
   - List rendering with proper keys
   - Slot definitions (default/named/scoped)
   - Teleport usage if needed

3. **Styling:**
   - Scoped styles
   - CSS custom properties
   - Responsive design
   - Dark mode support
   - Transition classes

4. **Composables:**
   - Extract reusable logic
   - Proper cleanup on unmount
   - SSR compatibility

5. **Type Definitions:**
   - Props interface
   - Emits interface
   - Exposed methods interface
   - Slot props types

6. **Testing Setup:**
   - Component test structure
   - Mock setup for dependencies

Include both Options API and Composition API versions.