BUG: My Options ( in traits ) for select component gets resetted every time after each reload of page

[Sudhin35]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome

Reproducible demo link

Not there

Describe the bug

How to reproduce the bug?

1. Install Grapes js and implement the select component code
2. Drag the select component into the editor
3. Click on the select component and enter the traits
4. Reload the page .

What is the expected behavior?

1. Entered options should not be reset in the traits manager for that component
2. Already entered options should be visible in the traits manager for that component

What is the current behavior? My Options ( in traits ) for select component gets resetted every time after each reload of page

If is necessary to execute some code in order to reproduce the bug, paste it here below:

![options_issue](https://user-images.githubusercontent.com/50030377/141947836-5ff7009b-93ae-455b-8135-5a0a4ea91269.png)
 const trm = editor.TraitManager;
    trm.addType('select-options', {
      events:{
        'keyup': 'onChange',
      },

      onValueChange: function () {
        var optionsStr = this.model.get('value').trim();
        var options = optionsStr.split('\n');
        var optComps = [];

        for (var i = 0; i < options.length; i++) {
          var optionStr = options[i];
          var option = optionStr.split('::');
          var opt = {
            tagName: 'option',
            attributes: {}
          };
          if(option[1]) {
            opt.content = option[1];
            opt.attributes.value = option[0];
          } else {
            opt.content = option[0];
            opt.attributes.value = option[0];
          }
          optComps.push(opt);
        }

        var comps = this.target.get('components');
        comps.reset(optComps);
        this.target.view.render();
      },

      getInputEl: function() {
        if (!this.$input) {
          var md = this.model;
          var trg = this.target;
          var name = md.get('name');
          var optionsStr = '';
          var opts = {placeholder: ''};
          var options = trg.get('components');

          for (var i = 0; i < options.length; i++) {
            var option = options.models[i];
            var optAttr = option.get('attributes');
            var optValue = optAttr.value || '';
            optionsStr += `${optValue}::${option.get('content')}\n`;
          }

          this.$input = document.createElement('textarea');
          this.$input.value = optionsStr;
        }
        return this.$input;
      },
    });    

    editor.Components.addType('input-select', {
      isComponent: el => el.tagName === 'SELECT',
       // Model definition
      model: {
        defaults: {
          tagName: 'select',
          components:{options: [ // Array of options
            { 'opt1':'Option 1'},
          ]},
          //draggable: 'form, form *', // Can be dropped only inside `form` elements
          droppable: false, // Can't drop other elements inside
          attributes: { // Default attributes
            type: 'select-options',
            name: 'select-name',
            class:'form-control'
          },
          traits: [{
            type: 'select-options' // built-in types: text, number, select, checkbox, color
          }],
          // Add some style, just to make the component visible
          style: {
          }
        }
      }
    });

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

Hi @Sudhin35 please follow this API for your custom traits and I'd highly recommend storing your options as a component property instead of using inner components