I've got problem to handle simple array of string validation. I wanted to check if they're a valid yt or vimeo links.

My rules looks like that:

const mediaUrls = ref<string[]>([''])

const rules = computed(() => ({
    mediaUrls: {
        $each: helpers.forEach({ url: ytOrVimeoValidation })
    }
}))

And I'm using in template myInput component which provides some actions:

<template v-for="(_,index) in mediaUrls" :key="index">
    <MyInput
      v-model="mediaUrls[index]"
      :fieldLabel="index === 0 ? 'Add a Video Link' : ''"
      :isFailedValidation="$v.mediaUrls.$each[index]?.$error"
      :validationErrorMessage="$v.mediaUrls.$each[index]?.$errors?.[0]?.$message.toString()"
      @blur="handleVideoBlur(index)"
      @input="handlePortfolioVideo(index)"
    />
</template>
<button @click="add">Add new input</button>

What i'm trying to do in handleVideoBlur method is $touch() the proper index. But when I provided incorrect url.. I can't show proper message which I have in my ytOrVimeoValidation validator.

Inside $v.mediaUrls.$each.$response.$data I have Object with empty objects (there are as many objects as characters in the url) Inside $v.mediaUrls.$each.$response.$errors I have Array with object (if i have one input) and inside this object is empty arrays (the same situation as above with number of arrays)

Button just push empty string to mediaUrls array for render new input.

Anyone knows how to deal with that problem?