wip - hitting perf issues with devtools open

dev/Dev.vue

@@ -1,21 +1,72 @@
 <template>
   <div id="app">
-    <v-select v-model="selected" v-bind="config" />
+    <!--    <v-select v-model="selected" v-bind="config" />-->
+
+    <v-select v-model="selected" v-bind="config">
+      <template #dropdown>
+        <DropdownMenu>
+          <DropdownMenuItem
+            v-for="(option, index) in config.options"
+            :key="option.value"
+            :option="option"
+            :index="index"
+          >
+            {{ option.label }}
+          </DropdownMenuItem>
+        </DropdownMenu>
+      </template>
+    </v-select>
+
+    <v-select v-model="selected" v-bind="config">
+      <template #dropdown>
+        <DropdownMenu as="div">
+          <div v-for="group in Object.keys(optionsGroupedByLabel)" :key="group">
+            <div>{{ group }}</div>
+            <ul>
+              <DropdownMenuItem
+                as="li"
+                v-for="(option, index) in optionsGroupedByLabel[group]"
+                :key="option.value"
+                :option="option"
+                :index="index"
+              >
+                {{ option.label }}
+              </DropdownMenuItem>
+            </ul>
+          </div>
+        </DropdownMenu>
+      </template>
+    </v-select>
   </div>
 </template>
 
 <script>
 import vSelect from '@/components/Select.vue'
 import countries from '../docs/.vuepress/data/countryCodes.js'
+import DropdownMenu from '@/components/DropdownMenu.vue'
+import DropdownMenuItem from '@/components/DropdownMenuItem.vue'
 
 export default {
-  components: { vSelect },
+  components: { DropdownMenuItem, DropdownMenu, vSelect },
   data: () => ({
     selected: null,
     config: {
       options: countries,
+      getOptionKey: ({ value }) => value,
     },
   }),
+  computed: {
+    optionsGroupedByLabel() {
+      return this.config.options.reduce((acc, option) => {
+        const label = option.label[0]
+        if (!acc[label]) {
+          acc[label] = []
+        }
+        acc[label].push(option)
+        return acc
+      }, {})
+    },
+  },
 }
 </script>