<template>
  <div class="flex items-center my-2">
    <v-radio
      v-model="example.model"
      :validationState="example.validationState"
      value="option"
      id="option"
    ></v-radio>
    <label
      for="option"
      class="ml-3"
    >
      option
    </label>
  </div>

  <div class="flex items-center my-2">
    <v-radio
      v-model="example.model"
      :validationState="example.validationState"
      value="option 2"
      id="option2"
    ></v-radio>
    <label
      for="option2"
      class="ml-3"
    >
      option 2
    </label>
  </div>

  <div class="flex items-center my-2">
    <v-radio
      v-model="example.model"
      :validationState="example.validationState"
      value="option 3"
      id="option3"
    ></v-radio>
    <label
      for="option3"
      class="ml-3"
    >
      option 3
    </label>
  </div>

</template>
  

    
  
  

    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  model: "",
});

let events = ref([]);
</script>
  

    
  
  

    <template>
  <v-radio-group v-model="language">
    <v-radio
      v-for="l in languagesData"
      :value="l"
      :id="'language-' + l"
      :label="l"
      class="my-2"
    ></v-radio>
  </v-radio-group>

  <div class="mt-5">
    <span class="font-semibold">Language:</span>
    {{ language }}
  </div>
</template>
  

    
  
  

    <script setup>
import { ref } from "vue";

let language = ref("");

let languagesData = ref([
  "english",
  "swedish",
  "korean",
  "german",
  "icelandic",
  "japanese",
]);
</script>