How to update radio-buttons group based on selection - vue.js

Question

I have a working on a Responsive yes/no questionnaire where user can select either yes/no on each of the posed questions.
I want each questionCard component to have a radio-button group (yes/no). The radio-circles should be hidden and only label should be visible. Clicking on the label should select the appropiate option.
ALL THIS WORKS
My issue comes in when I re-size the window! The layout changes appropietly but the radio selection is gone.
Any Ideas how I can keep the selection regardless the window size?
CodeSandbox
App.vue
<template>
<parent-component />
</template>
<script>
import parentComponent from "./components/parentComponent.vue";
export default {
name: "App",
components: {
parentComponent,
},
};
</script>
<style>
</style>
Parent.vue
<template>
<div>
<question-card
v-for="car in objectData.cars.data"
:key="car.id"
:carData="car"
></question-card>
</div>
</template>
<script>
import questionCard from "./questionCard.vue";
export default {
name: "App",
components: {
questionCard,
},
data() {
return {
objectData: {
cars: {
data: [
{
id: 1,
name: "Do You Like Tesla?",
},
{
id: 2,
name: "Do You Like BMW?",
},
{
id: 3,
name: "Do You Like AUDI?",
},
],
},
},
};
},
};
</script>
Questioncard.vue
<template>
<br />
<br />
<div class="hidden sm:block">
<h1>Lage Screen</h1>
<h2 class="font-bold">{{ carData.name }}</h2>
<div class="flex items-center justify-center">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'yes'"
/>
<label
:for="carData.id + 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>Yes</span>
</label>
</div>
<div class="flex items-center justify-center">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'no'"
/>
<label
:for="carData.id + 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>
</label>
</div>
</div>
<div class="sm:hidden">
<h1>Small Screen</h1>
<h2 class="font-bold">{{ carData.name }}</h2>
<div class="flex items-center w-1/2 justify-center">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'yes'"
/>
<label
:for="carData.id + 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>Yes</span>
</label>
</div>
<div class="flex items-center w-1/2 justify-center">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'no'"
/>
<label
:for="carData.id + 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>
</label>
</div>
</div>
</template>
<script>
export default {
props: ["carData"],
data() {
return {
selected: null,
};
},
methods: {
onChange(event) {
this.selected = event.target.value;
},
},
};
</script>
<style scoped>
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: #78be20;
}
</style>

Answer 1

I see you are using TailwindCSS. You can control the sizes with w-1/2 sm:w-full on the elements
You don't need different input for the different screen sizes. Like this
<div class="">
<h1>Any size Screen</h1>
<h2 class="font-bold">{{ carData.name }}</h2>
<div class="flex items-center justify-center w-1/2 sm:w-full">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'yes'"
/>
<label
:for="carData.id + 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>Yes</span>
</label>
</div>
<div class="flex items-center justify-center w-1/2 sm:w-full">
<input
#change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id + 'no'"
/>
<label
:for="carData.id + 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>
</label>
</div>
</div>