I am encountering an issue with 2 sliders in my project. I have set it up so that when the lower slider's value is greater than 0, the top slider should automatically be set to 5. I am using a watcher function for this purpose. However, if I manually change the position of the top slider, it does not visually snap back to the 5 position even though its value remains at 5. How can I make it return to the correct position visually?
https://jsfiddle.net/omz36csL/29/
HTML
<div id="app">
<v-app>
<v-card class="pa-5 ma-2">
<v-row v-for="(dummy, index) in dummyData" :key="index">
<v-slider v-model="dummyData[index]" :min="0" :max="5" type="numbers" single-line hide-details>
</v-slider>
<v-chip>{{dummyData[index]}}</v-chip>
</v-row>
</v-card>
</v-app>
</div>
JS
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data: {
dummyData: [1, 0]
},
watch: {
dummyData(val) {
if (val[1] > 0) {
this.dummyData[0] = 5
}
}
}
});