custom component save

hi @artf sorry to be a pain i really didn't want to open a issue ticket but i have been stuck for days trying to achieve my end goal

i have made a simple plugin that adds icon support (font awsom) so i have a components.js a block.js and a main.js with some configs

i have managed to get the onchange working, however i dont know how to update the modal as on refresh the new selected icon goes back to the default icon. im sure i am doing something wrong and i have looked through all your gjs and cant figure it out

block.js

bm.add('icon', {
    label: 'Icon',
    attributes: {
      title: 'Insert Icon',
      class: 'fa fa-asterisk',
    },
    content: `<span data-gjs-custom-name="icon" data-gjs-draggable="*" data-gjs-droppable="false" class="icon"></span>`,
  });

component.js

domc.addType('icon', {
    model: defaultModel.extend({
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        iconslist: c.icons,
        icon: c.icon,
        draggable: '.col',
        droppable: false,
        traits: [
          {
            type: 'select',
            label: 'Icon',
            name: 'iconslist',
            changeProp: 1,
            options: c.icons
          }],
        script: function() {}
      }),
      init() {
        var icon = this.get('icon');
        console.log('init', icon);
        this.listenTo(this, 'change:iconslist', this.updateIcons);
      },
      updateIcons() {
        var icon = this.get('iconslist');
        this.set('icon',icon);
        const view = this.view;
        if (view) {
          var i = view.el.querySelector('[data-js=icon]');
          i.className = "";
          i.classList.add('fa');
          i.classList.add(icon);
        }
      },
    }, {
      isComponent: function(el) {
        if (hasClass(el, 'icon')) {
          return {
            type: 'icon'
          };
        }
      },
    }),
    view: defaultView.extend({
      init() {
        const comps = this.model.get('components');
        if (!comps.length) {
          comps.reset();
          comps.add(`
              <i data-js="icon" class="fa ${c.icon}"></i>
          `);
        }
      }
    }),
  });

and in the main.js i have some defaults set up (i have cut this down)

let defaults = {
icon: 'fa-snapchat-ghost',
icons: [
{
        "value": "fa-glass",
        "name": "glass"
      },
      {
        "value": "fa-music",
        "name": "music"
      }
]
}