function ajaxCallback(array &$form, FormStateInterface $form_state)
{
  $response = new AjaxResponse();
  $response->addCommand(new SettingsCommand(['myData' => [2, 4]]));
  return $response;
}

setInterval(function() { console.log(settings.myData); }, 5000);

AND

$('#test-button').once('testClick').bind('click', function(e) {
    e.preventDefault();
    console.log(settings.myData);
});

The Problem: After the ajaxCallback is executed settings.myData reports in the console the same as before the ajaxCallback.

    namespace Drupal\settings_controller_test\Form;

    use Drupal\Core\Form\FormBase;
    use Drupal\Core\Form\FormStateInterface;
    use Drupal\Core\Ajax\AjaxResponse;
    use Drupal\Core\Ajax\SettingsCommand;

    class SettingsControllerTestForm extends FormBase
    {
        public function getFormId() { return 'settings_controller_test_form'; }

        public function buildForm(array $form, FormStateInterface $form_state)
        {
            $form['invoker'] = [
                '#type' => 'submit',
                '#value' => t('Invoke Callback'),
                '#ajax' => [
                    'callback' => [$this, 'ajaxCallback']
                    ]
                ];
                
            $form['#attached']['drupalSettings']['myData'] = [1,2,3,4,5];
            $form['#attached']['library'][] = 'settings_controller_test/test';
            return $form;
        }

        public function ajaxCallback(array &$form, FormStateInterface $form_state)
        {
            $response = new AjaxResponse(); 

            #clear old myData settings
            $response->addCommand(new SettingsCommand(['myData' => []], TRUE));

            #add new data for myData settings
            $response->addCommand(new SettingsCommand(['myData' => [2,4]], TRUE)); 

            return $response;
        }

        public function validateForm(array &$form, FormStateInterface $form_state){}
        public function submitForm(array &$form, FormStateInterface $form_state){}
    }

(function ($, Drupal, drupalSettings) {
    Drupal.behaviors.myBehaviour = {
      attach: function (context) {
        //output: [1, 2, 3, 4, 5]
        console.log(drupalSettings.myData); 
        
        
        $(document).once().ajaxComplete(function(event, xhr, settings) {
          //output: [2, 4, 3, 4, 5]
          console.log(drupalSettings.myData);
        });
  
      }
    };
  })(jQuery, Drupal, drupalSettings);

UPDATE: The attempt to clear the myData array fails. Then when I attempt to set myData = [2,4] with merge set as TRUE the leading two elements change to 2,4 and the remaining elements in the array are still there.
NOTE: If I change: $response->addCommand(new SettingsCommand(['myData' => [2,4]], TRUE)); to $response->addCommand(new SettingsCommand(['myData' => [2,4]], FALSE)); the myData array remains completely unchanged [1,2,3,4,5]

Class Documentation: SettingsCommand

I'm trying to figure out how to use this Ajax Command correctly. I must be confused from the documentation, so I'm hoping someone can shed some light where I'm mistaken.

__construct(array $settings, $merge = FALSE)

array $settings: An array of key/value pairs of JavaScript settings.
bool $merge: Whether the settings should be merged into the global drupalSettings.

Given the array already in drupalSettings: ['drupalSettings']['myData'] = [1,2,3,4,5];
And the following ajaxCallback I would like to replace the 'myData' array with [2, 4]:

function ajaxCallback(array &$form, FormStateInterface $form_state)
{
  $response = new AjaxResponse();
  $response->addCommand(new SettingsCommand(['myData' => [2, 4]]));
  return $response;
}

I'm testing the state of 'myData' in JavaScript using the following:

setInterval(function() { console.log(settings.myData); }, 5000);

The Problem: After the ajaxCallback is executed settings.myData reports in the console the same as before the ajaxCallback.

Class Documentation: SettingsCommand

I'm trying to figure out how to use this Ajax Command correctly. I must be confused from the documentation, so I'm hoping someone can shed some light where I'm mistaken.

__construct(array $settings, $merge = FALSE)

array $settings: An array of key/value pairs of JavaScript settings.
bool $merge: Whether the settings should be merged into the global drupalSettings.

Given the array already in drupalSettings: ['drupalSettings']['myData'] = [1,2,3,4,5];
And the following ajaxCallback I would like to replace the 'myData' array with [2, 4]:

function ajaxCallback(array &$form, FormStateInterface $form_state)
{
  $response = new AjaxResponse();
  $response->addCommand(new SettingsCommand(['myData' => [2, 4]]));
  return $response;
}

I'm testing the state of 'myData' in JavaScript using the following:

setInterval(function() { console.log(settings.myData); }, 5000);

AND

$('#test-button').once('testClick').bind('click', function(e) {
    e.preventDefault();
    console.log(settings.myData);
});

The Problem: After the ajaxCallback is executed settings.myData reports in the console the same as before the ajaxCallback.