How to use the deep-diff.observableDiff function in deep-diff

(err, json) => {
		if (err) {
			throw err;
		}
		const customConfig = {};

		observableDiff(unifiedNewConfig, json, d => {
			// if there is any change on one attribute of object in array
			// we want to preserve the full object not just that single attribute
			// it is required due to nature of configuration merging in helpers/config.js
			// e.g. If someone changed ip of a peer we want to keep full peer object in array
			//
			// if change is type of edit value
			// and change path is pointing to a deep object
			// and path second last index is an integer (means its an array element)
			const changeInDeepObject =
				d.kind === 'E' &&
				d.path.length > 2 &&
				Number.isInteger(d.path[d.path.length - 2]);

			// if there is a change in array element we want to preserve it as well to original value
			const changeInArrayElement = d.kind === 'A';

// Start off with the stuff that we do not diff (we are not the source of truth for
        // these - they will always be applied as given to us).
        const final = {
            Common: populateNonTruthClasses(to.Common, this.classesOfTruth)
        };
        const updatedClasses = [];
        const updatedNames = {};

        const toDelete = {
            Common: {}
        };

        // let deep-diff update the from declaration so we don't have to figure out how
        // to apply the changes. Collect updated paths on the way so we can copy just
        // the changed data
        observableDiff(from, to, (diff) => {
            // diff.path looks like ['Common', 'VLAN', 'myVlan'], for example
            if (this.classesOfTruth.indexOf(diff.path[1]) !== -1) {
                applyChange(from, to, diff);

                // the item at index 1 is the name of the class in the schema
                // if these are named objects (vlans, for example) the name is at
                // index 2
                const schemaClass = diff.path[1];
                let objectName;
                if (this.namelessClasses.indexOf(schemaClass) === -1) {
                    objectName = diff.path[2];
                }
                // For additions of named classes, the object name will be in the rhs object
                if (!objectName && diff.rhs) {
                    objectName = Object.keys(diff.rhs)[0];
                }

beforeCompile: function() {
    var self = this;
    var blank_doc = BlueInk.component(this.editor).options.data();

    if (Object.keys(this.doc).length < 2
        && undefined !== this.doc.type) {
      // we have "stub" / initiation doc, so reset to defaults
      this.doc = blank_doc.doc;
    }

    // trigger new keys into Vue.js' observable-ness
    observableDiff(this.doc, blank_doc.doc,
      function(diff) {
        // if we've got a new key addition, trigger an $add
        if (diff.kind === 'N') {
          self.doc.$add(diff.path.join('.'), diff.rhs);
        }
      });
  },
  compiled: function() {

(err, json) => {
		if (err) {
			throw err;
		}
		const customConfig = {};

		observableDiff(unifiedNewConfig, json, d => {
			// if there is any change on one attribute of object in array
			// we want to preserve the full object not just that single attribute
			// it is required due to nature of configuration merging in helpers/config.js
			// e.g. If someone changed ip of a peer we want to keep full peer object in array
			//
			// if change is type of edit value
			// and change path is pointing to a deep object
			// and path second last index is an integer (means its an array element)
			const changeInDeepObject =
				d.kind === 'E' &&
				d.path.length > 2 &&
				Number.isInteger(d.path[d.path.length - 2]);

			// if there is a change in array element we want to preserve it as well to original value
			const changeInArrayElement = d.kind === 'A';

export default function(original, updated, exclude = []) {
  const result = {}

  observableDiff(original, updated, function(d) {
    const entry = d.path[d.path.length - 1]
    if (!exclude.includes(entry)) {
      applyChange(result, undefined, d)
    }
  })

  return result
}

handleDataDiff =() => {
    const { sourceData, value } = this.props;
    try {
      const oldData = yaml.safeLoad(sourceData);
      const newData = yaml.safeLoad(value);
      const diffArr = observableDiff(oldData, newData);
      this.setState({ diffLen: diffArr.length });
      if (diffArr.length && value) {
        this.handleDiff(diffArr);
      } else {
        this.setState({ diffLen: 0 });
        this.ace.editor.setValue(yaml.safeDump(yaml.safeLoad(sourceData), { lineWidth: 400 }));
        this.ace.editor.clearSelection();
      }
    } catch (err) {
      Choerodon.prompt('数据格式错误');
    }
  };

fetchBuildData: function(force) {
    var self = this, needsUpdate = false,
        fieldsRequiringUpdate = ['google_doc_url'];

    if ( force || !this.cachedData ) {
      needsUpdate = true;
    } else if ( this.hasChanged('data') ) {
      diff( this.get('data'), this.previous('data'), function(d) {
        if ( _.contains(fieldsRequiringUpdate, d.path[d.path.length-1]) ) {
          needsUpdate = true;
        }
      } );
    }

    if ( needsUpdate ) {
      return Promise.resolve( $.ajax({
        type: "POST",
        url: this.url() + "/preview_build_data" + (force ? '?force_update=true' : ''),
        data: JSON.stringify( this.formData() ),
        contentType: 'application/json',
        dataType: 'json'
      }).then(function( data ) {
        self.cachedBuildData = data;
      }) );