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

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]

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.

NightCatSama / vue-slider-component

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

Describe the bug

Environment