Как глубоко сравнить копию реактивного объекта и реактивный объект Vue 2?

Question

[Esm322]

Подскажите, как глубоко сравнить копию реактивного объекта и реактивный объект. Пробовал через сравнение JSON.stringify, через глубокое копирование перед сравнением, через isEqual lodash, через кастомный метод, ничего не срабатывает. Все действие происходит в вотчере:

handler(newValue) {
                    this.prevNote = newValue;
                    if (isEqual(this.prevNote, this.copy_note)) {
                        this.isNoteChanged = false;
                    }
                    if (!isEqual(this.prevNote, this.copy_note)) {
                        this.isNoteChanged = true;
                    }
                    // if (JSON.stringify(this.prevNote) !== JSON.stringify(this.copy_note)) {
                    //     this.isNoteChanged = true;
                    // }
                    //
                    // if (JSON.stringify(this.prevNote) === JSON.stringify(this.copy_note)) {
                    //     this.isNoteChanged = false;
                    // }
            },
            deep: true,

Answer 1

[0xD34F]

ничего не срабатывает

Ну и какие ошибки получаете? Или как обычно - затруднились увидеть разницу между "не срабатывает" и "результат работы отличается от ожидаемого"?

глубокое копирование перед сравнением

То есть, сделали копию и стали сравнивать её с оригиналом. С которого эта копия только что была снята. Толково придумано. Надо ли удивляться, что в ста случаях из ста никаких изменений выявлено не будет?

Копировать надо не перед сравнением, а после внесения изменений:

computed: {
  objCopy() {
    return structuredClone(this.obj);
  },
  ...

Следим не за оригиналом, а за копией - так будут доступны два действительно разных объекта, до изменений и после:

watch: {
  objCopy(newVal, oldVal) {
    // здесь можно сравнить старый и новый объекты
  },
  ...

https://jsfiddle.net/f1oe2z87/