[Wall of code] How to change class for a list item in a loop?

Alright friends! This is my problem:

I send a json collection with props to a vue component. Its a bunch of questions for a quiz. Every question has four (4) choices, and one of them choices is correct, and the other three (3) is wrong. And the question can also be a "info" box, then the choices don't show (think I have manage to get that right in the code).

So when clicking wrong choice, that clicked choice should change class to is-danger, and the correct answer should be changed to is-success. So both the right and wrong answer should be marked. And on top of that, the class is-hidden for notification box and Next-button should be removed.

And ofc, if wrong button is clicked a Ajax call should be made, and the same if a correct answer is clicked. How would you guys do this?

<template>
    <div>
        <div class="container is-fluid">
            <div class="columns is-desktop">
                <div class="column is-7">
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">
                                Question {{ this.counter+1 }}/{{ question.length }} <!-- question xx / of xx questions -->
                            </p>
                            <a href="/account" class="card-header-icon" aria-label="more options">Exit</a>
                        </header>
                        <div class="card-image">
                            <figure class="image" v-if="question[this.counter].image">
                                <img :src="'/' + question[this.counter].image" alt="Placeholder image">
                            </figure>
                            <span v-else>
                            </span>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-content has-text-centered">
                                    <p class="title is-4">
                                        {{ question[this.counter].description }}
                                    </p>
                                </div>
                            </div>
                            <div class="notification" v-if="question[this.counter].is_info">
                                {{ question[this.counter].source }}
                            </div>
                            <div class="content has-text-centered" v-for="(item, index) in question[this.counter].choice_in_random_order" :key="index">
                                <p class="field">
                                    <a href="#" class="button is-fullwidth" 
                                    v-on:click.prevent="evaluate(index)">{{ item.choice }}</a>
                                </p>
                            </div>
                            <div class="is-hidden"> <!-- class="is-hidden" for notification -->
                            <hr>
                                <div class="notification is-warning">
                                    {{ question[this.counter].source }}
                                </div>
                            </div>
                            <footer class="card-footer is-hidden"> <!-- class="is-hidden" -->
                                <a href="#" v-on:click.prevent="next()" class="card-footer-item">Next</a>
                            </footer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['questions'],

        mounted() {
             //
         },

        data: function(){
            return {
                question: this.questions.question,
                counter: 0
            }
        },

        methods: {
            next: function(){
                if((this.counter += 1) >= this.question.length){
                    this.counter = 0
                }
            },
            evaluate: function(index){
                alert('Index pressed: ' + index)
            },
            wrongAnswer: function() {
                this.$http.post('/quiz/api/wrong').then(result => {
                    // do something
                });
            },
            correctAnswer: function() {
                this.$http.post('/quiz/api/correct').then(result => {
                    // do something
                });
            },
        }
    }
</script>