How to dynamically change the DomComponents ?

Hello , Thank you for this great library , i am working with a newsletter system that get content from the database and generate the latest articles in the site , i created a dynamic block with dynamic type that has source setting , when the user add the source it send a request to the url and it should get the content from and change the block to what the content is from the request .

DomComponents

        comps.addType('dynamic', {
            model: defaultModel.extend({
                    defaults: Object.assign({}, defaultModel.prototype.defaults, {
                        tagName: 'div',
                        class: 'dynamic-content',
                        badgable: true,
                        highlightable: true,
                        editable: true,
                        droppable: false,
                        draggable: true,
                        removable: true,
                        traits: [{
                            type: 'url',
                            label: 'Source',
                            name: 'source',
                        }],
                    }),
                   
                    updated(property, value, prevValue) {
                        if(value.source != null) {
                            axios.get(value.source).then(function(response) {
                                var content = response.data;
                                var originalMap = comps.getType('dynamic');
                                originalMap.model.extend({
                                    // Override how the component is rendered to HTML
                                    toHTML: function () {
                                        return content;
                                    }
                                })
                                console.log(originalMap.view.extend({
                                    
                                }))
                            }).catch(function(error) {
                                console.log(error)
                            })
                        }
                       
                    },
                    toolbar: [
                        {
                            attributes: {class: 'fa fa-arrows'},
                            command: 'import-content',
                        }
                    ],
                },
              
                {
                    isComponent(el) {
                        if (el.tagName == 'DIV' && el.dataset.dynamic == "1") {
                            return {type: 'dynamic'};
                        }
                    },
                }),

            // Define the View
            view: defaultView.extend({

                events: {
                    'keydown': function(e) {
                        if (e.key == 'Backspace') {
                            e.target.parentNode.removeChild(e.target);
                        }
                    }
                }
            }),
        });

Block

blockManager.add('dynmaic', {
                id: 'dynmaic',
                label: 'Dynmaic Content',
                category: 'Extra',
                textable: 1,
                attributes: {class: 'fab fa-3x fa-react'},
                void: true,
                highlightable: true,
                draggable: true,
                droppable: true,
                removable: true,
                editable: true,
                content: {
                    type: 'dynamic',
                    attributes: {
                        'data-dynamic': 1,
                        value: 'dynamic'
                    }
                },
            });