Over-ride multi-dimensional array

Question

I have got an array with some default settings, this is multi-dimensional. I then over-ride these settings within an ajax call. All works fine apart from any multi-dimensional keys, due to the root key being replaced currently.

{
  "selectedFacetsToTop": true,
  "singleSelect": false,
  "layouts": {
    "root": {
      "folder": "Layouts",
      "view": "",
      "default": "Default"
    },
    "results": {
      "folder": "Results",
      "view": "",
      "default": "Default"
    }

This is how I over-ride the defaults:

const custom = await Axios.get('/custom-settings');
this.config = custom.data.config;

/**
 * Example Response:
 * {
 *    "layouts" => [
 *        "results" => [
 *          "view" => "Special"
 *        ]
 *    ]
 * }
 */

/**
 * Merge the default settings with custom settings.
 */
Object.assign(this.settings, custom.data.settings);

Does anyone know a way I can over-ride the defaults, so with the example response above, I would only update the "view" within "results", however at the moment the entire "layouts" is being replaced.