Uploading file or any type

Hi all,

I'm looking for a little advice here, I'm trying to get all form inputs as well as any type of file the user selects to upload. I have the following in my Vue component:

<template>
<div>
    <div class="inputArea" v-for="(input, index) in inputs" :key="index">
        <div class="table-responsive">
            <table class="table-sm">
                <tr>
                    <td>Item
                        <input type="text" :id="input.id" v-model="input.item" name="item[]"  class="form-control" value="" autocomplete="off" placeholder="Gas Bill">
                    </td>
                    <td>
                         Amount Outstanding
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">£</span>
                          </div>
                          <input type="number" :id="input.id" v-model="input.amount_os" name="amount_os[]" class="form-control" value="" autocomplete="off" placeholder="22.00">
                        </div>
                    </td>
                    <td>
                        Description
                        <input :id="input.id" v-model="input.description" type="text" class="form-control" name="description[]" value="">
                    </td>
                    <td>
                        Invoice
                        <input type="file" id="file" ref="file" @change="handleFileUpload()">
                    </td>
                    <td>
                        <br />
                        <button v-on:click.prevent="removeInput(input.id)" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
                        <button @click.prevent="addInput" class="btn btn-sm btn-primary">Add Item</button>
                    </td>
                </tr>
            </table>

            <button class="btn btn-success mt-3" @click.prevent="addBill">Update</button>
        </div>
    </div>
</div>
</template>

<script>

export default {

    data() {
        return {
            counter: 0,
            inputs: [{
                id: '',
                item: '',
                amount_os: '',
                value: '',
                description: '',
                file: ''
            }],
        }
    },

    methods: {
        addInput(e) {
            e.preventDefault();
            this.inputs.push({
                id: `item${++this.counter}`,
                item: '',
                amount_os: '',
                value: '',
                description: '',
                file: ''
            });
        },
        removeInput : function (input) {
            this.inputs.splice(input, 1);
        },
        addBill() {                
            axios.post('/bills', { 
                    headers: {
                        "Content-type": "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2)
                    },
                    items: this.inputs, file: this.file     
                }).then(response => {
                        console.log(response);
                });
        },
        handleFileUpload(event){
            this.inputs.file = this.$refs.file.files[0];
          }
    }
}
</script>

Which results in the following response:

array:2 [
  "headers" => array:1 [
    "Content-type" => "multipart/form-data; charset=utf-8; boundary=9473711616144889"
  ]
  "items" => array:1 [
    0 => array:6 [
      "id" => null
      "item" => "qwe"
      "amount_os" => "22"
      "value" => null
      "description" => "qw"
      "file" => null
    ]
  ]
]

But there's no file there, even though I did select a file to upload. Any help & suggestions, greatly appreciated.