vue.js で２つのdataを関連付けて同時に表示させる方法が知りたいです。

Question

目的

現在vueで英単語タイピングゲームのコンポーネント作っており、問題部分に英単語と単語の意味を表示させたいと思っています。
以下のコードの通り、dataにwordとmeaningという配列をつくり、その中からcurrentWordとcurrentMeaningを抽出し、解いた問題の単語と意味をsolvedWordsとsolvedMeaningsに入れていきます。
currentWordとcurrentMeaningを関連付けるために、どちらもrandomIndexをindexにしたのですが、実際にゲームを始めてみると、currentWordはきちんとsolvedWordsに格納されるのですが、なぜかcurrentMeaning以外のmeaningの中の値がsolvedMeaningsに格納されてしまいます。この問題の解決方法を教えていただきたいです。

vue.js

<template>
   <div id='app' class="text-center">
    <!-- ゲーム中の画面 -->
    <div v-if="trying">
      
      <div class="time badge badge-dark" id="timer"> 
        残り時間[{{ formatTime }}]
      </div>
      <div class="row">
        <div class="col-12">
          <img src="../imege/good.png" v-if="isTypingCorrect">
          <img src="../imege/bad.jpg" v-else>
        </div>
      </div>
      <div class="badge badge-dark" style="margin: 15px 0; font-size: 30px">第{{ currentWordNumber }}問</div>
      <h1>{{ currentWord }}</h1>
      <p>{{ currentMeaning }}</p>
      <div class="row">
        <div class="offset-4 col-4">
          <input id="input-typing" @keyup.enter="nextQuiz()" type="text" class="form-control" v-model="typingText">
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-12">
          <button @click="goMenu(), riset()" type="button" class="btn btn-light btn-lg">やり直す</button>
        </div>
      </div>
    </div>
    <!-- ゲーム開始前の部分 -->
    <div v-if="!trying" style="padding: 15px">
      <button @click="start(), startTimer()" type="button" class="btn btn-danger btn-lg">ゲームスタート</button>
    </div>
  </div>
</template>

<script >
import Vue from 'vue'
import VueSwal from 'vue-swal'
Vue.use(VueSwal)
export default ({
  name: "game",
  data() {
    return {
       trying: false,
       words: [
          'apple',
          'dog',
          'famous',
          'dustbox',
          'drink',
        ],
        meanings: [
          'りんご',
          '犬',
          '有名な',
          'ゴミ箱',
          '飲み物',
        ],
        solvedWords: [],
        solvedMeanings: [],
        typingText: '',
        min: 10,
        sec: 0,
        timerOn: false,
        timerObj: null,
     }
  },
  methods: {
    start(){
          this.trying = true
          this.solvedWords = []
          this.solvedMeanings = []
          this.typingText = ''
          Vue.nextTick(() => {
            document.getElementById("input-typing").focus()
          })
    },
    goMenu(){
      this.trying = false
          this.solvedWords = []
          this.solvedMeanings = []
          this.typingText = ''
          this.stopTimer()
    },
    nextQuiz(){
      if(this.typingText == this.currentWord){
            this.solvedWords.push(this.currentWord)
            this.solvedMeanings.push(this.currentMeaning)
            this.typingText = ''
            return true
          }
    },
    // timer部分ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    count() {
      if (this.sec <= 0 && this.min >= 1) {
        this.min --;
        this.sec = 59;
      } else if(this.sec <= 0 && this.min <= 0) {
        this.complete();
      } else {
        this.sec --;
      }
    },
    startTimer() {
      let self = this;
      this.timerObj = setInterval(function() {self.count()}, 1000)
      this.timerOn = true; //timerがONであることを状態として保持
    },
    stopTimer() {
      clearInterval(this.timerObj);
      this.timerOn = false; //timerがOFFであることを状態として保持
    },
    riset(){
        this.min = 10
        this.sec = 0
    },
    finshAlert(){
      let solvedCount = this.solvedWords.length     
      this.$swal(`${solvedCount}問正解`)
    },
    complete() {
      clearInterval(this.timerObj)
      this.finshAlert()
      this.solvedWords = []
      this.solvedMeanings = []
      this.trying = false
      this.riset()
    },
    
// timer部分終わりーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー   
    
  },
  computed: {
    unsolvedWords(){
      let unsolvedWords = this.words.filter((word) => {
            return (!this.solvedWords.includes(word))
        })
      return unsolvedWords
    },
    unsolvedMeanings(){
      let unsolvedMeanings = this.meanings.filter((meaning) => {
            return (!this.solvedMeanings.includes(meaning))
          })
      return unsolvedMeanings
    },
    randomIndex(){
        return Math.floor(Math.random()*this.unsolvedWords.length)
    },
    currentWord(){
          return this.unsolvedWords[this.randomIndex]
    },
    currentMeaning(){
          return this.unsolvedMeanings[this.randomIndex]
    },



    currentWordNumber(){
          return this.solvedWords.length + 1
    },
    isTypingCorrect(){
          const typingTextLength = this.typingText.length
          return (this.typingText === this.currentWord.slice(0, typingTextLength))
    },
// timer部分ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    formatTime() {
      let timeStrings = [
        this.min.toString(),
        this.sec.toString()
      ].map(function(str) {
        if (str.length < 2) {
          return "0" + str
        } else {
          return str
        }
      })
      return timeStrings[0] + ":" + timeStrings[1]
    }
  },
})
</script>

<style scoped>
  #timer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.time {
  font-size: 30px;
}
</style>

Answer 1

ざっと見ただけですが

randomIndexの中でunsolvedWordsの長さ（要素数）を参照していますが、unsolvedWordsはsolvedWordsに依存しているようなので
nextQuizの中でsolvedWordsに要素をpushした時点でunsolvedWordsの長さが変わり
次の行ではrandomIndexが別の値を返すようになってしまっているのではないでしょうか？