UPD: Pane switching (random for testing)

src/components/config/ConfigPane.vue

@@ -27,7 +27,6 @@ import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import { Separator } from '@/components/ui/separator'
-import { ref } from 'vue'
 
 defineProps({
   showTabs: {
@@ -36,7 +35,10 @@ defineProps({
   },
 })
 
-const currentPage = ref(1)
+const currentPage = defineModel({
+  type: Number,
+  default: 0,
+})
 
 const configPageOptions = [
   {

src/components/device/DevicePreview.vue

@@ -30,10 +30,10 @@
         class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
         :class="{'outline outline-white': selected==='ring',
         'hover:outline outline-zinc-400': selected!=='ring'}"
-        @click="selected='ring'" />
+        @click="selected='ring'; $emit('select', selected)" />
       <DeviceKeys
         :selected="selected" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
-        @select="args => selected=args" />
+        @select="args => {selected=args; $emit('select', selected)}" />
     </div>
   </div>
 </template>
@@ -48,6 +48,8 @@ import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
 import gsap from 'gsap'
 import DeviceKeys from '@/components/device/DeviceKeys.vue'
 
+defineEmits(['select'])
+
 const selected = ref('a')
 
 const value = ref(69)