Vue Component Patterns

Generate Vue 3 components for WordPress plugins. Follow these conventions:

## Component Structure
```vue
<template>
  <!-- Template with aioseo- BEM class naming -->
</template>

<script setup>
import { computed, ref } from 'vue'
import { useOptionsStore } from '@/vue/stores'
</script>

<style lang="scss">
.aioseo-component-name {
  // Global styles, never scoped
}
</style>
```

## Rules
- Always use `<script setup>` — never Options API
- Pinia stores for all shared state: `useOptionsStore`, `useRootStore`, `useLicenseStore`
- SCSS variables for all colors, spacing, and font sizes
- BEM naming with `aioseo-` prefix
- Never use scoped styles
- Grid layout: `<grid-row>` + `<grid-column :md="N">` (12-column)
- Settings pattern: `<core-settings-row>` with description in #content slot
- Tabs for indentation everywhere