UPD: Lots of refactoring

src/components/config/PaletteInput.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex font-heading">
+    <button
+      v-for="(option, key) in options" :key="key"
+      class="flex-1 pt-2 items-center text-center"
+      :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
+      @click="currentOption = key">
+      {{ $t(option.key) }}
+      <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
+    </button>
+  </div>
+  <HSVInput v-model="options[currentOption].color" class="relative z-20" />
+</template>
+<script setup>
+import HSVInput from '@/components/config/HSVInput.vue'
+import Color from 'color'
+import { onBeforeMount, reactive, ref } from 'vue'
+
+const currentOption = ref(null)
+
+const model = defineModel({
+  type: Object,
+  default: () => ({
+    one: {
+      key: 'One',
+      color: Color('#ff0000'),
+    },
+    two: {
+      key: 'Two',
+      color: Color('#00ff00'),
+    },
+    three: {
+      key: 'Three',
+      color: Color('#0000ff'),
+    },
+  }),
+})
+
+const options = reactive(model.value)
+
+onBeforeMount(() => {
+  if (currentOption.value === null)
+    currentOption.value = Object.keys(options)[0]
+})
+
+</script>