siimee/frontend/src/components/onboarding/QuestionResponse.vue

<template lang="pug">
.question.pa12
    header.w-flex.row.justify-space-between.pb6
        label {{question.question}}
    section.radio-buttons.w-flex.row.justify-space-between
        h3(v-for="label in question.labels") {{label}}
    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems")
</template>

<script>
export default {
    props: {
        question: {
            type: Object,
            required: true,
        },
    },
    emits: ['updated'],
    data: () => ({
        radioItems: [
            { answer: 1 },
            { answer: 2 },
            { answer: 3 },
            { answer: 4 },
            { answer: 5 },
        ],
    }),
    methods: {
        onUpdate(e) {
            this.$emit('updated', { ...this.question, answer: e + 1 })
        },
    },
}
</script>