Unable to use array element with Vuetify v-file-input-CodePudding

I have a component that uses multiple Vuetify v-file-input components

<v-file-input
                :accept="allowedFileTypes"
                label="Choose Attachment"
                :loading="attachmentBeingProcessed"
                name="file0" 
                id="file0"
                :error='fileSizeError[0]'
                outlined
                dense
                @change="fileSelectedForUpload(0)"
                @click:clear="removeAttachment(0)"
            ></v-file-input>

I want to show a particular v-file-input in error mode through code. However, when I set this.fileSizeError[0] = true, it does not put the component in error mode. However, if I use a variable (not array), as show below, it works

<v-file-input
                :accept="allowedFileTypes"
                  label="Choose Attachment"
                :loading="attachmentBeingProcessed"
                    name="file1" id="file1"
                    :error='fileSizeError1'
                     :error-messages = "fileSizeErrorMsg1"
                outlined
                dense
                @change="fileSelectedForUpload(1)"
                @click:clear="removeAttachment(1)"
            ></v-file-input>

Is there a reason that I cannot use an array element with ":error"?

Thanks.

CodePudding user response：

There is nothing wrong with assigning an array value to a prop, the problem is changing an array index value is not reactive in Vue 2. As the docs explain, to get around this issue you can update your array[0] value to true using $set:

this.$set(this.fileSizeError, 0, true);