title: Merge object with Object.assign override internal object without merge
body: <p>I have two object that I want to <strong>merge</strong> in a new object, the first object is for default options for a google chart:</p>
  
  <pre><code>optionsA = {
      height: 500,
      focusTarget: 'category',
      hAxis: {
        showTextEvery: 0,
        slantedText: true,
        slantedTextAngle: 45,
        format: 'date',
      },
  }
  </code></pre>
  
  <p>With my second object I want to add some properties to <code>hAxis</code> and override present options with the new values but I want to keep the options by default in <strong><code>optionsA</code></strong>.</p>
  
  <p>This is my second object:</p>
  
  <pre><code>optionsA = {
      isStacked: true,
      hAxis: {
        gridlines: {
          count: 10
        },
        format: 'percent',
      },
  }
  </code></pre>
  
  <p><em>These objects are more complex but I reduce the properties to simplify the question</em></p>
  
  <p>When I try to merge with object.assign the result is that object B add new root properties to the new object, but properties in <code>hAxis</code> is complete overrided with the options in <code>optionsB</code>.</p>
  
  <pre><code>let newObj = Object.assign({}, optionsA, optionsB);
  </code></pre>
  
  <p>This is the object that I want expected:</p>
  
  <pre><code>{
      height: 500,
      focusTarget: 'category',    
      isStacked: true,
      hAxis: {
        gridlines: {
           count: 10
        },
        format: 'percent',
        showTextEvery: 0,
        slantedText: true,
        slantedTextAngle: 45,
      },
  }
  </code></pre>
  
  <p>but instead of this I am getting this:</p>
  
  <pre><code>{
      height: 500,
      focusTarget: 'category',    
      isStacked: true,
      hAxis: {
         gridlines: {
           count: 10
         },
         format: 'percent',
      },
  }
  </code></pre>
  
  <p>Properties in hAxis are completely override with the new properties, what's wrong with my aproach?</p>