V-model updating all Instances - vue.js

Question

My code accurately updates the gameInput array, however when you edit the numbers, tempval visually fills in every empty cell- is there anyway to avoid that? It, however, only updates the cell that is needed, not all cells. It is only visually as you input it.
<template>
<div>
<div class = "wrapper">
<div class = "list" v-for="(number,index) in gameNums" :key="index">
<div class = "cell=empty" v-if="number == 0"> <input type="text" v-on:change="changeVal(index)" v-model="tempval" v-bind:id="'empty'+ index""> </div>
<div class = "cell" v-else> {{number}} </div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'sudoku',
data: function(){
return{
gameAnswer: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
gameBoard: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
gameInput: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
gameWon: 0,
tempval : 0
}
},
computed: {
gameNums: function() {
var i = 0;
while(i < 35){
var val = Math.floor(Math.random()*82);
console.log(i);
this.gameBoard[val] = 0;
this.gameInput[val] = 0;
i = i+1;
}
return this.gameBoard;
}
},
methods:{
randomNumber: function(index){
var val = Math.floor(Math.random()*3);
if(val == 0){
this.gameBoard[index] = 0;
return true;
} else{
return false;
}
},
changeVal(index, number){
this.gameInput[index]= this.tempval;
console.log(number + "number");
}
},
};
</script>

Answer 1

The issue here is that you are using the same variable tempval as v-model for all inputs, so once tempval changes it gets updated on all inputs.
One way of fixing this is, if you want to have all inputs active at the same time, is to remove the v-model and pass the event to the changeVale method:
<input
type="text"
v-on:change="changeVal(index, $event);"
v-bind:id="'empty' + index"
/>
And then in the changeVal method:
changeVal(index, event) {
this.gameInput[index] = event.target.value;
}
I tried this approach with v-on:change and I didn't like it too much since it doesn't trigger instantly. It gets triggered when you change the focus or press enter.
I prefer to use keyup:
<input
type="text"
v-on:keyup="changeVal(index, $event);"
v-bind:id="'empty' + index"
/>