title: How to deep merge instead of shallow merge?
body: <p>Both <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="noreferrer">Object.assign</a> and <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" rel="noreferrer">Object spread</a> only do a shallow merge.</p>
  
  <p>An example of the problem:</p>
  
  <pre><code>// No object nesting
  const x = { a: 1 }
  const y = { b: 1 }
  const z = { ...x, ...y } // { a: 1, b: 1 }
  </code></pre>
  
  <p>The output is what you'd expect. However if I try this:</p>
  
  <pre><code>// Object nesting
  const x = { a: { a: 1 } }
  const y = { a: { b: 1 } }
  const z = { ...x, ...y } // { a: { b: 1 } }
  </code></pre>
  
  <p>Instead of</p>
  
  <pre><code>{ a: { a: 1, b: 1 } }
  </code></pre>
  
  <p>you get</p>
  
  <pre><code>{ a: { b: 1 } }
  </code></pre>
  
  <p>x is completely overwritten because the spread syntax only goes one level deep. This is the same with <code>Object.assign()</code>.</p>
  
  <p>Is there a way to do this?</p>