Vue.js не выполняет повторный рендеринг при изменении состояния файла

У меня есть следующий код в Vue.js:

<div class = "file has-name is-fullwidth is-light">
  <label class = "file-label">
              <input
                class = "file-input"
                type = "file"
                ref = "img_input"
                @change = "onFileChange"
              />
              <span class = "file-cta">
                <span class = "file-icon">
                  <i class = "fas fa-upload"></i>
                </span>
                <span class = "file-label">
                  Choose a file…
                </span>
              </span>
              <span class = "file-name">
                {{ service.image ? service.image.name : "No File Chosen" }}
              </span>
            </label>
</div>
<script>
  export default {
    name: "ServiceForm",
    data() {
      return {
        service: {},
      };
    },
    methods: {
      onFileChange() {
        this.service.image = this.$refs.img_input.files[0];
      },
    },
  };
</script>

Однако в vue devtools я вижу, что изображение загружается в состояние, однако третье не работает и по-прежнему не возвращает выбранный файл.