[QUESTION] Custom panel button that dynamically Enable/Disable user scripts

Hello and thanks for sharing such a good project. I'm trying to customize some things in the editor but I have some questions that I would appreciate if they could be clarified. Recently I create a panel button to switch editor from absolute and default modes and it's working without any problem.

cmmd.add('change_mode', {
  run: function(editor) {
    editor.getModel().set('dmode', 'absolute');
  },
  stop: function(editor) {
    editor.getModel().set('dmode', 'default');
  },
});

pnm.addButton('options', [{
  className: 'fa fa-hand-rock-o',
  command: 'change_mode',
  attributes: {
    title: 'Drag Mode'
  }
}]);

But when I try the same method (pratically the same code) to make another panel button that allows users to enable/disable scripts in the editor (allowScripts: 0 or 1).

cmmd.add('allowScripts', {
  run: function(editor) {
    editor.getModel().set('allowScripts', 1);
  },
  stop: function(editor) {
    editor.getModel().set('allowScripts', 0);
  },
});

pnm.addButton('options', [{
  className: 'fa fa-terminal',
  command: 'allowScripts',
  attributes: {
    title: 'Allow Scripts'
  }
}]);

I really see this is changing the value through the editor.getModel().attributes.allowScripts function but in practise it's not working. We should see an alert when the button is clicked and the Allow Script button is active. But only If we initialize the editor with ...allowScripts: 1... we can see the alert, but it won't deactivate with the custom panel button. Am I missing something here? Here is a codepen demo of the problem: https://codepen.io/RJCAM/pen/xxZbNLw

BTW: This code is just a test, after doing it what I really want is allow user scripts only in preview mode and not in editor mode.