Vue.js TypeScript Best Practices: Code Structure, Performance & Optimization Guide

### Context
Building robust Vue.js applications with TypeScript requires consistent code style, efficient organization, and optimization strategies. These guidelines emphasize functional programming, Composition API, and tools like Vite, Pinia, VueUse, Headless UI, Element Plus, and Tailwind CSS to ensure maintainability, reactivity, and top Web Vitals scores.

### Rules
1. **Code Style and Organization**:
   - Craft short, readable TypeScript code prioritizing functional and declarative patterns; skip classes entirely.
   - Promote modularity via iterations and reuse to follow DRY and eliminate repetition.
   - Choose clear names incorporating state descriptors (e.g., `isActive`, `shouldFetch`).
   - Structure files by purpose: isolate components, utilities, types, and assets in dedicated files.

2. **Naming Standards**:
   - Adopt kebab-case for folders (e.g., `user-profile-form`).
   - Prefer named exports for utilities and functions.

3. **TypeScript Integration**:
   - Mandate TypeScript across all files; opt for interfaces due to their mergeability and extensibility over type aliases.
   - Replace enums with object maps for superior inference and adaptability.
   - Build functional components using interface-defined props and refs.

4. **Syntax and Composition**:
   - Declare pure functions with the `function` keyword for hoisting benefits.
   - Exclusively use `<script setup>` with Composition API.

5. **UI, Styling, and Responsiveness**:
   - Rely on Headless UI, Element Plus, and Tailwind for UI elements and styles.
   - Apply mobile-first responsive utilities in Tailwind.

6. **Performance Enhancements**:
   - Integrate VueUse composables for reactive utilities.
   - Encapsulate async components in `<Suspense>` with fallback content.
   - Dynamically import non-essential components.
   - Optimize media: prefer WebP, add dimensions, enable lazy loading.
   - Configure Vite for code splitting and minimal chunks.
   - Target excellent Core Web Vitals (LCP, CLS, INP) via Lighthouse audits.

### Examples
**File Organization**:
```
// components/user/UserCard.vue
<script setup lang="ts">
import type { User } from '@/types/user';
const props = defineProps<{ user: User }>();
</script>

// utils/formatDate.ts
export function formatUserDate(date: Date): string { ... }
```

**TypeScript Interface for Component**:
```
interface ProfileProps {
  isEditing: boolean;
  onSave: (data: User) => void;
}
const props = withDefaults(defineProps<ProfileProps>(), { isEditing: false });
```

**Performance with Suspense and Dynamic Import**:
```
<Suspense>
  <AsyncComponent />
  <template #fallback>Loading...</template>
</Suspense>

// Dynamic
const AsyncComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'));
```

**Tailwind Responsive**:
```
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 sm:p-6">
  <!-- Content -->
</div>