[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.