Removing a value from an array is updating both changeset and class property

[anandlall112]

Version

3.9.0

Test Case

import Component from '@glimmer/component';
import {FieldsValidations} from "app/validations/form";
import {action} from '@ember/object';
import Changeset from "ember-changeset";
import lookupValidator from "ember-changeset-validations";

export default class FormComponent extends Component {
  
Example model data structure
    {
      id: 1,
      label: "Reason",
      options: ["test1", "test2", "test3"]
    }

  constructor() {
    super(...arguments);
    this.field = this.args.model;
    this.changeset = new Changeset(this.field, lookupValidator(FieldsValidations), FieldsValidations);
  }


  @action
  deleteOption(option) {
    let options = this.changeset.get('options');
    options.splice(options.indexOf('test2'), 1);
    this.changeset.set('options', [...options]);

    // Both changeset and the class property are updated.
    console.log(this.changeset.get('options')); // Result ["test1", "test3"]
    console.log(this.field.options); // Result ["test1", "test3"]

    //However, updating a string value does not behave like this
    this.changeset.set('label', 'testing');

    console.log(this.changeset.get('label')); // Result 'testing'
    console.log(this.field.label); // Result 'Reason'
  }
}

[anandlall112]

Any suggestion on how to handle this issue?

[snewcomer]

@anandlall112 I just added a test in #555. Mind taking a look and letting me know how this might differ from your example? Free free to reopen!