Vuelidate not working when computed list is provided

[rvbz]

When using a computed list the validators does not update correctly on any change.

If I have a list of elements coming from my server, and I want to display them in a list of corresponding data, let's say this is my list:

const initialData = ref([
  { "id": 1, "start_time": "09:00:00", "finish_time": "13:00:00", "date": null }, 
  { "id": 2, "start_time": "09:00:00", "finish_time": "13:00:00", "date": null },
  { "id": 3, "start_time": "09:00:00", "finish_time": "12:00:00", "date": "31/05/2024" }
]);

And I want to display only the elements that matches a particular selected date, in this case I want to only show to the user the record that has a date = "31/05/2024", so I've created a computed property to filter the initialData and return only the elements that matches that date:

const date = ref('31/05/2024');

const slotsData = computed(() =>
    initialData.value.filter((elem) => elem.date === date.value)
); 

When passing the new computed property to the nested component to display the list and validate, only the original ones are the ones validated, but if I add more elements to the initialData dynamically, those new elements are not piked up by vuelidator to validate

You can take a look on the example in this link:
https://playcode.io/1842471?v=3

Am I doing something wrong?

Thanks in advance.

[hope-ag]

In SlotsTable.vue, convert the data prop into a ref and pass the now reactive data to the useVuelidate.

import { toRefs } from "vue"

const { data } = toRefs(props)

const v = useVuelidate(rules, data, { $autoDirty: true });