explain scoping between org and users and add vue example

Author: wobsoriano

docs/components/api-keys.mdx

@@ -5,6 +5,8 @@ description: Clerk's <APIKeys /> component for managing API keys.
 
 The `<APIKeys />` component is used to manage API keys for your application. It allows you to create, edit, and revoke API keys for your application.
 
+The component automatically manages API keys based on the user's current context. When the user has an active organization selected, all operations are scoped to that organization. Otherwise, operations are user-scoped.
+
 To utilize the `<APIKeys />` component, you must first enable API keys in the Clerk Dashboard.
 
 > [!WARNING]
@@ -46,7 +48,7 @@ All props are optional.
 
 The following example includes a basic implementation of the `<APIKeys />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "React Router", "TanStack React Start"]}>
+<Tabs items={["Next.js", "React", "React Router", "TanStack React Start", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app/api-keys/page.tsx' }}
     import { APIKeys } from '@clerk/nextjs'
@@ -91,6 +93,18 @@ The following example includes a basic implementation of the `<APIKeys />` compo
     }
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'api-keys.vue' }}
+    <script setup lang="ts">
+    import { APIKeys } from '@clerk/vue'
+    </script>
+
+    <template>
+      <APIKeys />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 <If sdk="js-frontend">