JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<body>

    <div id="content"></div>

</body>

JavaScript

let differences = function (newObj, oldObj) {
          return _.reduce(newObj, function (result, value, key) {
            if (!_.isEqual(value, oldObj[key])) {
              if (_.isArray(value)) {
                result[key] = []
                _.forEach(value, function (innerObjFrom1, index) {
                  if (_.isNil(oldObj[key][index])) {
                    result[key].push(innerObjFrom1)
                  } else {
                    let changes = differences(innerObjFrom1, oldObj[key][index])
                    if (!_.isEmpty(changes)) {
                      result[key].push(changes)
                    }
                  }
                })
              } else if (_.isObject(value)) {
                result[key] = differences(value, oldObj[key])
              } else {
                result[key] = value
              }
            }
            return result
          }, {})
        }

// Test
let obj1 = {
    a: 1,
    b: 2,
    c: { foo: 1, bar: 2},
    d: { baz: 1, bat: 2 }
}

let obj2 = {
    b: 2, 
    c: { foo: 1, bar: 'monkey'}, 
    d: { baz: 1, bat: 2 },
    e: 1
}
var diff = differences(obj1, obj2)
document.getElementById("content").innerHTML = JSON.stringify(diff)