Why is the click not working?

Question

Vue.js

<div class="container__wrap" id="app">
    <div class="header">
        <input type="file" v-model="file" class="" id="file" ref="file">     
        <a class="button"   v-on:click="submitFile">Отправить </a>
    </div>

    <div class="container">

        <div class="slider" id="s-1"></div>
        <div class="slider" id="s-2"></div>
        <div class="slider" id="s-3"></div>
        <div class="slider" id="s-4"></div>
        <div class="slider" id="s-5"></div>

    </div>
</div>

var app = new Vue({
        el: '#app',
        data() {
            return {
                file: '',
                text: 'ww',
                seen: true,
            }
        },
        methods: {
            submitFile() {
                console.log('Отправляем');
                let formData = new FormData();
                formData.append('file', this.file);
                axios.post('/vendor/FileController',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function () {
                    console.log('SUCCESS!!');
                })
                    .catch(function () {
                        console.log('FAILURE!!');
                    });
            },
            handleFileUpload() {
                this.file = this.$refs.file.files[0];
            }
        }
    });

click on submit button not working

Answer 1

Everything works, albeit with warnings: