Vue js перекомпилируется при загрузке файла с axios

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>

Сама функция работает отлично, загрузка прошла успешно. Проблема в том, что после этого происходит автоматическая c перекомпиляция.

то же самое происходит, когда я удаляю изображение из каталога. после завершения перекомпиляции событие, которое я использовал в смонтированном хуке, больше не работает, и на моем ярлыке нет сообщения

Кто-нибудь знает, почему это происходит?