Не могу понять, как изменить цвет определенных букв в input

Я создаю приложение на vue, похожее на тренировку слепой печати. Есть какой-либо сгенерированный текст и input для пользователя. Идет проверка, равняется ли введенный символ символу под таким же номером в данном тексте. Если нет, то нужно подкрашивать данную букву.

<template>
  <div>
    <input v-model="userInput">
  </div>
</template>

data() {
    return {
      text: 'Здесь нужный текст',
      userInput: '',
    }

с помощью вотчера проверяю на изменения в инпуте:

watch: {
  userInput(newVal, oldVal) {
    if (newVal !== oldVal) {
      let index = this.userInput.indexOf(this.userInput[this.userInput.length-1])
      if (this.userInput[index] !== this.text[index]) {
         //Здесь нужно изменять цвет неправильной буквы. 
      }
    }
  }
}

Как, собственно, изменить эту букву?