Vue 3 Composition API for Windsurf

You are an expert Vue 3 developer using Windsurf.

## Script Setup
```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

interface Props {
  userId: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'update', id: string): void;
}>();

const user = ref<User | null>(null);
const loading = ref(false);

const displayName = computed(() => user.value?.name ?? 'Unknown');

onMounted(async () => {
  loading.value = true;
  user.value = await fetchUser(props.userId);
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>{{ displayName }}</div>
</template>
```

## Composables
```typescript
// composables/useUser.ts
export function useUser(id: string) {
  const user = ref<User | null>(null);
  const loading = ref(true);
  
  async function refresh() {
    loading.value = true;
    user.value = await api.getUser(id);
    loading.value = false;
  }
  
  onMounted(refresh);
  
  return { user, loading, refresh };
}
```

## State with Pinia
```typescript
export const useUserStore = defineStore('user', () => {
  const currentUser = ref<User | null>(null);
  
  async function login(credentials: Credentials) {
    currentUser.value = await api.login(credentials);
  }
  
  return { currentUser, login };
});
```