VueJS 3 - V-model not updating the initial data value - vuejs3

Question

I read all the similar topics in here and still can't tell what's wrong...
The v-model in not making the data reactive.
I’m using vue#3.2.31 with Chromium browser version 88 on Linux and I have the following code:
< input min=“1” id=“run-times” v-model.number=“runTimes”/>
with
data() { return { runTimes: 1, }; },
The strange thing is that only on this browser, the v-model is not updating the initial value of runTimes.
It is not only on this part of code but on all codes where I use v-model.
On all other browsers everything is working correctly tested it with Windows, MacOS and Android.
Have anyone had any issues with the update with v-model?
Thanks in advance

Answer 1

why v-model.number=“runTimes”?,
It should just bev-model=“runTimes”

Answer 2

It turns out, that there is a virtual keyboard extension, which does not fire the correct events in order the reactivity to work.
I'm still trying to see a solution without reworking the code, but in the end, it could be done getting the value from the element itself when you want to use it.

Answer 3

Sometimes some browsers don't support reactive v-model updating, especially mobile browsers. In this case you can use :value="yourModelValue".
For example:
<input type="text" :value="myValue" #input="inputData($event)">
export default {
data() {
return {
myValue: '',
}
},
methods: {
inputData($event) {
// Value will update reactively
$event.target.value;
}
}
}