使用Axios上传文件时重新编译Vue js

Question

我正在开发在组件上上传的常用图片

<template>
     <div>
         <label>{{message}}</label>
         <input name="file" @change.prevent="upload($event)"  type="file">
     </div>
</template>

<script>
     import Vue from 'vue'
     import axios from 'axios'
     import VueAxios from 'vue-axios'
     import {eventBus} from '../../components/template/messages'
     Vue.use(axios,VueAxios)

     export default {
          data: () => {
               return {
                   message:''
               } 
          },
          mounted(){
               var ins = this; // Vue instance
               eventBus.$on('message', function(response){  
                  ins.message = response;
               });    
          },
          methods: {
               upload: function(event){
                    var formData = new FormData();
                    formData.set('file', event.target.files[0]);
                    axios.post('http://localhost/api/newfile',formData, 
                    {
                        headers: {
                           'Content-Type': 'multipart/form-data'
                        }
                    }
                    ).then((response) => {
                       console.log(response)

                    }, () => {
                       /* Error callback */
                       console.log(Error)
                    });
               }
          }
     }
</script>

函数本身运行良好，上传成功，问题是此后会自动重新编译。

当我从目录中删除图像时，也会发生同样的情况。 重新编译后，我在安装的挂钩中使用的事件不再起作用，并且标签上没有消息

有人知道为什么会这样吗？