Componente de tipo personalizado en entorno de producción

Entiendo esa parte, pero si quiero renderizar el componente que he creado no funciona. Lo explicaré un poco, he creado un tipo de componente que renderiza datos desde un endpoint, pero si uso código html y css no funciona.

Tipo de componente personalizado
'editor. DomComponents.addType('group', {
        modelo: {
            Predeterminados: {
                El nombre de la etiqueta que se usará en el código final
                etiquetaNombre: 'div',
                Atributos: "",
                Usarías rasgos para personalizar propiedades personalizadas
                Rasgos: [
                    {
                        tipo: 'select',
                        cambioProp: 1,
                        nombre: 'customProp',
                        Opciones: []
                    }
                ]
            },
            init() {
                sea trait_customProp = this.get('traits').where({ name: 'customProp' })[0];
                trait_customProp.set('options', start_options);
                si (Object.keys(this.getAttributes()).length === 0) {
                    console.log("Objeto init vacío");
                } else {
                    trait_customProp.set('value', this.getAttributes().value);
                }
                this.on('change:customProp', () => this.view.onRender());
            }
        },
        Vista: {
            Por ejemplo, Puedes personalizar la etiqueta en el lienzo
            Por defecto, la vista usará la misma etiqueta que el modelo
            etiquetaNombre: 'div',

async onRender() {

Recuperación del valor de rasgo

sea trait_value = this.model.get('traits').where({ name: 'customProp' })[0].attributes.value;

si (trait_value === "") {
                    console.log("El valor del atributo es vacío");
                } else {
                    console.log('Valor del atributo: ${trait_value}');
                    this.model.addAttributes({ value: trait_value });

Datos de renderizado
                    try {
                        para (opción de start_options) {
                            si (Number(trait_value) === opción.value) {
                                esto.$el.vacío();
                                let response = await axios.get('http://localhost:8100/dmxConnect/api/documents/retrieveXcollection.php?idcollection=${trait_value}');
                                this.model.addAttributes({ data: response.data.query1 });
                                si (response.data.query1.length > 0) {
                                    ¡Muchos datos, incomprensible!
                                    this.model.getAttributes().data.forEach(res => {
                                        JSON.parse(res.data).forEach(doc_data => {
                                            console.log(doc_data.userData); 
                                            this.$el.append('<h1>' + doc_data.userData[0] + '</h1>');
                                        });
                                    });
                                } else {
                                    this.$el.append('<h1>404 ${option.name}</h1>');
                                }
                            }
                        }
                    } captura (e) {
                        console.log(e);
                    }
                }

}

}
    }
    );

Un bloque para el tipo de grupo
    editor. BlockManager.add('test-render', {
        etiqueta: 'Render de prueba',
        Contenido: {
            Tipo: 'Grupo'
        },
        categoría: 'Personalizado'
    });`