My function in Vue seems to only work after intentionally causing an error and then refreshing the page. The code works fine it's just the initialization that's isn't working. Can anyone help?

Brief explanation:

When the user hits the button, a function is called by the name of provjeriOdgovore. The function looks for all the elements with the class name answer (the input fields), and then iterates, checking if the value of the input is contained inside of the variable odgovori. If it is, the program appends the class green-color to the classList of answer, if it isn't, the same thing happens but instead of green-color, it's red-color

Code in question:

HTML part:

<input class="answer" type="text">
<input class="answer" type="text">
<input class="answer" type="text">

<button :onclick="provjeriOdgovore()">Provjeri</button>

Javascript part:

const odgovori = [[long array of strings], [long array of strings], [long array of strings]]

export default {
  data() {
    return {
        provjeriOdgovore: () => {
          let questionDiv = document.getElementsByClassName("answer")
          for (let i = 0; i < questionDiv.length; i++) {
              let userInput = questionDiv[i].value.toLowerCase();
              questionDiv[i].classList.add("color-white")
              if (odgovori[i].includes(userInput)) {
                  console.log("tocno", questionDiv[i])
                  questionDiv[i].classList.add("green-color");
                  if (questionDiv[i].classList.length > 2) {
                      questionDiv[i].classList.remove("red-color");
                  }
              } else {
                  console.log("netocno" ,questionDiv[i])
                  questionDiv[i].classList.add("red-color");
                  if (questionDiv[i].classList.length > 2) {
                      questionDiv[i].classList.remove("green-color");
                  }
              } 
          }
      }
    }
  }
}