<v-file-input> in nested component error

Hello all,
I am a Vue and Vuetify newbie so apologies in advance if I’m posting incorrectly and asking stupid questions!
I have a nested component PerfReport in which I have a v-file-input field as follows:

  <v-text-field name="perfreportstatus" label="Status" id="perfreportstatus" v-model="value.perfreportstatus"></v-text-field>
  <v-file-input dense accept=".pdf,.jpg,.png" label="Upload Performance Report" hint="PDF, jpg, png only." v-model="value.perfreportfile"></v-file-input>
export default {
    props: {
        value: {
            type: Object,
            required: true
    watch: {
        value() {
            this.$emit('input', this.value);

In parent component I have declared:
perfreportdata: {
perfreportfile: “”,
perfreportstatus: “”,
And in template I’m doing:
<PerfReport v-model="perfreportdata"/>

But the file input is throwing an error and not rendering as follows:
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property ‘length’ of undefined
at VueComponent.truncateText (VFileInput.js?23a7:238)
at eval (VFileInput.js?23a7:107)
at Array.map ()
at VueComponent.text (VFileInput.js?23a7:106)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
at VueComponent.computedGetter [as text] (vue.runtime.esm.js?2b0e:4836)
at VueComponent.genSelectionText (VFileInput.js?23a7:190)
at VueComponent.genSelections (VFileInput.js?23a7:209)
at VueComponent.genInput (VFileInput.js?23a7:178)

I cannot figure this out. Any help will be much appreciated.


Your template can only have one child. Now it has two v-text-field and v-file-input. But that would be another warning