Have a look at this one:

HTML block:

<template>
  <div class="container-botoes">
    <BaseButton
      v-for="(options, index) in optionsAnswers"
      :key="options.id"
      class="optionsButtons"
      :class="correctAnsIndex === index ? 'green-button' : 'red-button'"
      @click="handleAnswer(options, index)"
    >
      {{ options.ans }}
    </BaseButton>
  </div>
</template>

JavaScript block:

<script>
export default {
  data() {
    return {
      correctAnsIndex: null,
    }
  },
  methods: {
    handleAnswer(options, index) {
      if (options.id === this.correctAnswer) {
        this.playerHit = true
        this.correctAnsIndex = index
      } else {
        this.opponentHit = true
        this.correctAnsIndex = null
      }
      this.nextquestion()
    },
  },
}
</script>

CSS block:

<style>
.red-button {
  background: red;
  color: white;
  font-weight: 700;
}

.green-button {
  background: green;
  color: white;
  font-weight: 700;
}
</style>

Code explanation:

We have passed the index of the loop in the handleAnswer method, where the value of the index will be assigned to the correctAnsIndex variable if options.id === this.correctAnswer and in the else part we will assign null value to the correctAnsIndex variable.

Now, we have applied conditional classes in HTML block, where if the index and correctAnsIndex matches then it would apply green-button class or else it will apple red-button class.

Eventually getting your expected result.

Try this :

Vue.component('basebutton', {
  data() {
    return {
        isCorrect: false
    }
  },
  props: ['answerobj'],
  template: `<button :class="{ 'green': isCorrect, 'white': !isCorrect}" @click="handleAnswer(answerobj)">{{ answerobj.answer }}</button>`,
  methods: {
    handleAnswer(answerobj) {
      if (answerobj.correct) {
            this.isCorrect = true
      } else {
        this.isCorrect = false
      }
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    list: [{
      question: 'Who is the tallest animal ?',
      optionsAnswers: [{
        answer: 'Elephant',
        correct: false
      }, {
        answer: 'Jirafe',
        correct: true
      }, {
        answer: 'Lion',
        correct: false
      }, {
        answer: 'Zebra',
        correct: false
      }]
    }]
  }
});

.green {
  background-color: green;
}

.white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in list" :key="index">
  <p><strong>Question : </strong>{{ item.question }}</p>
  <p><strong>Answers :</strong></p>
  <BaseButton v-for="(options, i) in item.optionsAnswers" :key="i" :answerobj="options">
  </BaseButton>
  </div>
</div>

One option is to create css classes with styles you need and append them to BaseButton component depending on your conditions