[Vue warn]: Invalid prop: custom validator check failed for prop “value”. Error shows after succesfully upload file to Firebase

I successfully uploaded a file to Firebase Storage and save the URL link to firestore.

But after the process is completed. The console pop-up this error:

[Vue warn]: Invalid prop: custom validator check failed for prop "value".

and on my screen, it shows up this:

show an error and no file is displayed even though the page is not refreshed.

Again, it only happens after I successfully upload the file.

vue template:

<v-col cols="12" sm="6" md="12">
    <v-file-input
        outlined
        show-size
        prepend-icon="null"
        accept=".pdf"
        v-model="ProgramSummary"
        :rules="required"
        :disabled="processing"
        style="width: 40%;">
        <template v-slot:append-outer>
            <v-progress-circular
                v-if="processing"
                indeterminate
                color="red"
            ></v-progress-circular>
        </template>
    </v-file-input>
</v-col>
<v-col cols="12" sm="6" md="6">
    <v-btn
        color="green"
        dark
        class="float-right"
        @click="uploadProgramSummary">
            Upload
    </v-btn>
</v-col>

script

data: () => ({
   //PROGRAM SUMMARY FILE UPLOAD
   processing: false,
   required: [
       value => !value || value.size < 1000000 || 'File size should not exceeded 1MB!',
   ],
   ProgramSummary: [], 
}),

methods: {
    // SAVE UPLOADED FILE TO FIRESTORE
    onUpload() {
        var uidRef = firebase.auth().currentUser.uid;
        var docRef = firestore
                        .collection("SubworkPackage")
                        .doc(firebase.auth().currentUser.uid)
                        .collection("ProgramSummary")
                        .doc();
        var data = {
            ProgramSummary: this.ProgramSummary,
            uid: uidRef,
            id: docRef,
        };
        firestore
            .collection("SubcontractorRegistration")
            .doc(firebase.auth().currentUser.uid)
            .collection("ProgramSummary")
            .add(data);
    },

    // PROGRAM SUMMARY UPLOAD FILE
    uploadProgramSummary() {
        //LOADING ICON SET TO TRUE
        this.processing = true;
        //DOC REFERENCE OF USER ID
        var uidRef = firebase.auth().currentUser.uid;
        // DOC NAME IS SET TO HAVE A FIXED NAME
        var programSummaryRef = "ProgramSummary.pdf"
        // FILE PATH
        const filePath = `SubcontractorRegistration/${uidRef}/${programSummaryRef}`;
        // METADATA
        const metadata = { contentType: this.ProgramSummary.type };
        //FIREBASE STORAGE ACTION
        FirebaseStorage
            .ref()
            .child(filePath)
            .put(this.ProgramSummary, metadata)
            .then(() => {
                FirebaseStorage
                    .ref()
                    .child(filePath)
                    .put(this.ProgramSummary, metadata)
                    .snapshot
                    .ref
                    .getDownloadURL()
                    .then((url) => {
                        this.ProgramSummary = url;
                        this.onUpload();
                        this.processing = false;
                        alert("Program Summary Succesfully Uploaded!")
                    })
            })
    },
}

I’m using Nuxt and Firebase with Vuetify as the UI library.