I've been trying to fix this problem for a long time: editor(View Code) doesn't detect changes to my component.

[PanuwatChinpratan]

Dear @artf or anyone can answer me. Thanks a lot

The problem is that when I use this.components(content) it gives me access to every layer in the component, but when I edit or change the text editor View code, no changes occur.
And if I change to use this.set('content',content) Everything will be wrapped in that component and no separate layers will be visible, but there are changes in the editor.

editor(view code) can't know what I changed here.

  const content = `<div>
                                <p>test 01</p>
                                <p>test 02</p>
                                <p>test 03</p>
                                </div>
                            `;

The summary I want is I want it to be changeable and to show separate layers.
Or did I misunderstand?

My Code

     editor.DomComponents.addType('test-input', {
                model: {
                    defaults: {
                        editable: true,
                        draggable: true,
                        droppable: true,
                        attributes: { contenteditable: true },
                        tagName: 'div',
                        script: function () {},
                        classes: ['test-input'],

                        traits: [
                            {
                                type: 'api-url',
                                label: 'API URL',
                                name: 'apiUrl',
                            },

                            {
                                type: 'api-path',
                                label: 'API Path',
                                name: 'apiPath',
                            },
                            {
                                type: 'api-custom-index',
                                label: 'index',
                                name: 'apiCustomIndex',
                            },
                        ],
                    },

                    init() {
                        // Set a flag to ensure fetchData is only called once upon initialization
                        if (!this.get('initialFetchDone')) {
                            this.fetchData();
                            this.set('initialFetchDone', true);
                        }

                        this.listenTo(
                            this,
                            'change:apiUrl change:apiPath change:apiCustomIndex',
                            this.fetchData
                        );
                    },

                    fetchData() {
                        const apiUrl = this.get('apiUrl');
                        const apiPath = this.get('apiPath');
                        const apiCustomIndex = this.get('apiCustomIndex');
                        if (apiUrl) {
                            fetch(apiUrl)
                                .then((response) => response.json())
                                .then((data) => {
                                    const result = apiPath ? getObjectPath(data, apiPath) : data;

                                    createJSONTreeAndShowModal(result, data);

                                    const itemsToDisplay = apiCustomIndex
                                        ? selectIndex(result, apiCustomIndex)
                                        : [result];
                                    console.log('Items to Display:', itemsToDisplay);

                                    const content = itemsToDisplay
                                        .map((item) => {
                                            return `      `;
                                        })
                                        .join('');

                                    this.components(content);
                                })
                                .catch((error) => {});
                        } else {
                            const content = `<div>
                                <p>test 01</p>
                                <p>test 02</p>
                                <p>test 03</p>
                                </div>
                            `;

                            this.components(content);
                        }
                    },
                },
                view: {
                    events: {
                        input: 'handleInputChange',
                    },
                    handleInputChange(e) {
                        this.model.set('content', e.target.innerHTML, { silent: true });
                    },
                },
            });

editor.BlockManager.add('test-input', {
              label: 'IN PUT 1',
              category: 'TEST 05',

              media: `<img src="../TEST/imagesIconBlock/Header.svg" alt="">`,

              content: {
                  type: 'test-input',
              },
          });