[vue3.x] Deep watching an array (modelValue)

[01vector]

Describe the bug

(ru)
Добрый день!
У меня есть modelValue: number[] = [1960, 2023]. К этому массиву привязан vue-slider посредством v-model. В то же время, к каждому из элементов массива привязан инпут следующим образом: <AppInput v-for="(input, index) in inputs" v-model.number="modelValue[index]" />
Когда я перемещаю точку на vue-slider, изменения фиксируются и все работает как и должно. Когда я пытаюсь вводить значения в свой AppInput, vue-slider не видит изменений.
Это связано с тем, что watch для modelValue в компоненте vue-slider не использует параметр deep: true.
Подскажите, пожалуйста, есть ли способ обойти подобное поведение, не редактируя исходный код библиотеки?
Большое спасибо за ответ!

(en)
Hello!
I have a modelValue: number[] = [1960, 2023]. The vue-slider is bound to this array using v-model. At the same time, each element of the array is bound to an input using the following syntax: <AppInput v-for="(input, index) in inputs" v-model.number="modelValue[index]" />
When I move the slider handle, the changes are detected and everything works as expected. However, when I try to enter values in the AppInput, the vue-slider doesn't see the changes.
This is because the watch for modelValue in the vue-slider component does not use the deep: true option.
Please, let me know if there is a way to workaround this behavior without modifying the source code of the library.
Thank you very much for your response!

Environment

• OS & Version: macOS
• Vue version: 3.3.4
• Component Version: [e.g. v4.0.0-beta.1]

[nekooee]

I have the same problem. my code is:

<price-input v-model="price[0]" />
<price-input v-model="price[1]" />

<vue-slider
        v-model="price"
        :min="0"
        :max="highestPrice"                      
        :order="false"
	:tooltip-formatter="formatter"
 />
<script setup>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/material.css'
import PriceInput from '@/views/vue/Components/async/priceInput.vue'

const price = defineModel('price')
const highestPrice = price.value[1]
const formatter = ref(['min', 'max'])
</script>

when I change the "price-input" value, the price range is updated but the slider does not move, and when I drag the slider, the price and "price-input" value do not change! It seems that "v-model" does not work at all.
When I use an internal variable, its value is updated by dragging the slider, but it does not update the price value even with the watch. I need to apply the changes with the change event. This means there is a problem.

[chandregowda]

I used :marks and it is changing the values in that under the Slider, but it is not updating the Slider main dots to that position, but I can see a marker in the slider bar for the update value in the input box. So, it is halfly implemented to update marks but not main marker. Even the slot is not getting updated.

[sinneren]

As temporary, U can set value by value props, and update by @update:model-value="(evt) => handleChange(evt, indexInput)
In handleChange U can reset all ref, eg:

const myRef=[indexInput=== 0 ? newval : myRef[0], indexInput===1 ? newval : myRef[1]]