Custom type component in production environment

I understand that part, but if I want to render the component I have created it doesn't work. I'll explain a little, I have created a type of component that renders data from an endpoint, if I use the html and css code it doesn't work.

Custom Component Type
`  editor.DomComponents.addType('group', {
        model: {
            defaults: {
                // The tag name that will be used in the final code
                tagName: 'div',
                attributes: "",
                // You would use traits to customize custom properties
                traits: [
                    {
                        type: 'select',
                        changeProp: 1,
                        name: 'customProp',
                        options: []
                    }
                ]
            },
            init() {
                let trait_customProp = this.get('traits').where({ name: 'customProp' })[0];
                trait_customProp.set('options', start_options);
                if (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());
            }
        },
        view: {
            // eg. You can customize the tag in the canvas
            // By default, the view will use the same tag of the model
            tagName: 'div',

            async onRender() {

                //Retrieving trait value

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

                if (trait_value === "") {
                    console.log("Attribute's value is empty");
                } else {
                    console.log(`Attribute's value: ${trait_value}`);
                    this.model.addAttributes({ value: trait_value });

                    //Rendering Data
                    try {
                        for (option of start_options) {
                            if (Number(trait_value) === option.value) {
                                this.$el.empty();
                                let response = await axios.get(`http://localhost:8100/dmxConnect/api/documents/retrieveXcollection.php?idcollection=${trait_value}`);
                                this.model.addAttributes({ data: response.data.query1 });
                                if (response.data.query1.length > 0) {
                                    //Muchos data, inentendible!
                                    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>`);
                                }
                            }
                        }
                    } catch (e) {
                        console.log(e);
                    }
                }

            }

        }
    }
    );

    // A block for the group type
    editor.BlockManager.add('test-render', {
        label: 'Test render',
        content: {
            type: 'group'
        },
        category: 'Custom'
    });`