Привязка Vuejs к img src работает только при перерисовке компонента

Question

У меня есть компонент, который позволяет пользователю загрузить изображение профиля с предварительным просмотром перед отправкой в ​​облачный сервис.

<template>
<div>
    <div
        class="image-input"
        :style="{ 'background-image': `url(${person.personData.imagePreview})` } "
        @click="chooseImage"
    >
        <span
            v-if="!person.personData.imagePreview"
            class="placeholder"
        >
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </span>
        <input
            type="file"
            ref="fileInput"
            @change="previewImage"
        >
    </div>
  </div>
</template>

Методы обработки предварительного просмотра:

chooseImage() {
    this.$refs.fileInput.click()
},
previewImage(event) {
            // Reference to the DOM input element
            const input = event.target;
            const files = input.files

            console.log("File: ", input.files)

            if (input.files && input.files[0]) {
                this.person.personData.image = files[0];

                const reader = new FileReader();

            reader.onload = (e) => {
                this.person.personData.imagePreview = e.target.result;
                }
                // Start the reader job - read file as a data url (base64 format)
                reader.readAsDataURL(input.files[0]);
            }
        },

Это прекрасно работает, за исключением случая, когда пользователь выбирает предыдущий проект из БД. this.person.personData.imagePreview get установлен на что-то вроде https://res.cloudinary.com/resumecloud/image/upload/.....id.jpg Затем, когда пользователь хочет изменить изображение своего профиля, он может выбрать новый в своей локальной файловой системе, и this.person.personData.imagePreview снова считывается как URL данных в формате base64. ,Но предварительный просмотр не работает. Только когда я меняю маршруты назад и вперед, отображается правильное изображение, выбранное пользователем.

Answer 1

Как я уже сказал в комментарии к моему сообщению. Оказывается, я идиот. При отображении предварительного просмотра я использовал this.person.personData.imagePreview. Когда пользователь выбирает проект из БД, я просто делал this.person.personData = response.data. Это прекрасно работает, за исключением того, что у меня было другое имя для imagePreview на моем бэкэнде. Поэтому при загрузке с БД я вручную установил такой же метод загрузки, как: this.person.personData.imagePreview = this.loadedPersonData.file. По какой-то причине это связано с реактивностью Vue.