JSON preguntas corregido

components/InputRadio.vue

@@ -3,27 +3,35 @@
     v-if="label" 
     class="mb-4 font-medium"
   >
-    <p class="mb-2 block">{{ label }} <span v-if="required" class="text-red-500">*</span></p>
-  </div>
-
-  <div 
-    v-for="(opt, index) in options" :key="`${opt.value}-radio-${index}`" 
-    class="flex items-center gap-2 mb-4 bg-white hover:bg-accent/20 pl-2 outline-1 -outline-offset-1 outline-gray-300 rounded-md cursor-pointer">
-    <input 
-      :id="`radio-` + opt.label" 
-      v-model="picked" 
-      type="radio" 
-      :value="opt"
-    />
-    <label :for="`radio-` + opt.label" class="cursor-pointer w-full py-2 pr-2">{{ opt.label }}</label>
+    <p class="mb-2 block">{{ label[langcode] }} <span v-if="required" class="text-white">*</span></p>
   </div>
+  <section class="flex flex-wrap gap-2 md:gap-4">
+    <div 
+      v-for="(opt, index) in options" :key="`${opt.value}-radio-${index}`" 
+      class="relative "
+      >
+      <input 
+        :id="`radio-` + opt.label[langcode]" 
+        v-model="picked" 
+        type="radio" 
+        :value="opt"
+        class="absolute opacity-0 peer"
+      />
+      <label 
+      :for="`radio-` + opt.label[langcode]" 
+      class="cursor-pointer w-full py-2 pr-2 text-sm flex items-center gap-2 bg-accent hover:bg-muted peer-checked:bg-muted text-surface pl-2 outline-1  -outline-offset-1 outline-gray-300 rounded-md">
+      {{ opt.label[langcode] }}</label>
+    </div>
+  </section>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     type: { type: String, default: 'radio' },
-    label: { type: String, default: '' },
+    label: { type: Object, default: () => ({}) },
     options: { type: Array, default: () => [] },
     required: { type: Boolean, default: false }
   },
@@ -33,6 +41,9 @@ export default {
       picked: ''
     }
   },
+  computed: {
+    ...mapGetters(["langcode"]),
+  },
   watch: {
     picked(newVal) {
       //////console.log('radio', newVal);