Mi función en Vue parece funcionar solo después de causar un error intencionalmente y luego actualizar la página. El código funciona bien, solo la inicialización no funciona. ¿Alguien puede ayudar?

Breve explicacion:

Cuando el usuario presiona el botón, se llama a una función con el nombre de provjeriOdgovore . La función busca todos los elementos con la answer de nombre de clase (los campos de entrada) y luego itera, verificando si el valor de la entrada está contenido dentro de la variable odgovori . Si lo es, el programa agrega la clase green-color a la lista de clases de answer , si no lo es, sucede lo mismo pero en lugar de green-color , es red-color

Código en cuestión:

parte HTML:

 <input class="answer" type="text"> <input class="answer" type="text"> <input class="answer" type="text"> <button :onclick="provjeriOdgovore()">Provjeri</button>

Parte de JavaScript:

 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"); } } } } } } }