Actualizar contenido antes de cargar

He construido un CMS en Laravel y usé GrapesJS para hacer que el Constructor de Páginas sea perfecto, solo creé un componente para "Publicaciones" para que los usuarios puedan seleccionar la categoría donde quieran seleccionar publicaciones también limitan. Después de seleccionar o cambiar el límite o categoría, se hace una solicitud a una petición al backend para mostrarme datos en JSON y i añadir a GrapesJS. Guardo todo el contenido de la página en la base de datos mediante el comando de GrapesJS: ''editor.store().html''

Ahora, ¿cómo puedo hacer que cargue publicaciones nuevas desde la base de datos desde esa categoría (Fotos 1 y 2) que seleccioné en el constructor. Porque GrapesJS solo me muestra código html.

Imagen componente 1

Imagen componente 2

Código para cargar contenido página por página

$page = Páginas::encontrar($id);
$pageContent = $page->contenido; aquí hay contenido de GrapesJS
return view('página')->con('páginaContenido', $pageContent);

Código de componente:

funciones posts(editor) {
    Rasgo -> Límite de publicación por página
    editor. TraitManager.addType('limitPostPerPage', {
        createInput({ trait }) {
            const traitOpts = trait.get('options') || [];
            const options = traitOpts.lenght ? traitOpts : [
                { id: '', nombre: 'Seleccionar categoría...' },
                { id: '8', nombre: 'Sport' },
                { id: '9', nombre: 'Global news' },
            ];
        
const el = document.createElement('div');
            el.className = "postsSettings";
            el.innerHTML = '
                <div class="group">
                    <label>Categoría:</label>
                    <select type="select" class="inputCategory">
                    ${options.map(opt => '<option value="${opt.id}">${opt.name}</option>').join('')}
                    </select>
                </div>
                <div class="group">
                    <label>Limitar la publicación por página</label>
                    <tipo de entrada="número" clase="inputLimitPostPerPage"/>
                </div>
            `;
        
const inputLimitPostPerPage = el.querySelector('.inputLimitPostPerPage');
            const inputCategory = el.querySelector('.inputCategory');
            inputCategory.addEventListener('change', ev => {
                console.log('inputCategory: ' + ev.target.value);
            });
            inputLimitPostPerPage.addEventListener('change', ev => {
                console.log('LimitPostPerPage: ' + ev.target.value);
            });
    
devuelve El;
        },
        onEvent({ elInput, component, event }) {
            var category = elInput.querySelector('select').value;
            var limitPostPerPage = elInput.querySelector('input').value;

$.ajaxSetup({ encabezados: { 'X-CSRF-TOKEN': laravel_csrf_token } });
            $.ajax({
                tipo: 'POST',
                url: getPostsListUrl,
                datos: { categoría: categoría, límitePostPerPágina: límitePostPerPágina },
                éxito: función(datos) {
                    if(data.status == 'éxito') {
                        component.set('content', data.html);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.growl.error({ mensaje: XMLHttpRequest.responseText });
                },
                fail: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.growl.error({ mensaje: XMLHttpRequest.responseText });
                },
            });
        },
    });

Componentes -> Publicaciones
    editor. DomComponents.addType('postsComponent', {
        modelo: {
            Predeterminados: {
                Testprop: 1,
                Rasgos: [
                    {
                        tipo: 'limitPostPerPage',
                        nombre: 'limitPostPerPage',
                        etiqueta: 'Configuración de publicaciones',
                        Opciones: [
                            { valor: 'enlace', nombre: 'Enlace' },
                            { valor: 'popup', nombre: 'Popup' },
                        ],
                    },
                ],
            },
        },
        Vista: {
        },
    });

Bloquear -> Publicaciones
    var html = '<div class="container">'+
' <div class="row pt-4" data-gjs-type="postsComponent">'+
' <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
' <div class="carta h-100">'+
' <a href="#">'+

' </a>'+
' <div class="card-body">'+
' <h4 class="card-title">'+
' <a href="#" data-gjs-editable="false" data-gjs-removable="false" data-gjs-stylable="false">Post 1</a>'+
' </h4>'+
' <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? ¡Nihil, dolorem!</p>' +
' </div>'+
' </div>'+
' </div>'+
' <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
' <div class="carta h-100">'+
' <a href="#">'+

' </a>'+
' <div class="card-body">'+
' <h4 class="card-title">'+
' <a href="#">Post 2</a>'+
' </h4>'+
' <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? ¡Nihil, dolorem!</p>' +
' </div>'+
' </div>'+
' </div>'+
' <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
' <div class="carta h-100">'+
' <a href="#">'+

' </a>'+
' <div class="card-body">'+
' <h4 class="card-title">'+
' <a href="#">Post 3</a>'+
' </h4>'+
' <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? ¡Nihil, dolorem!</p>' +
' </div>'+
' </div>'+
' </div>'+
' </div>'+
' </div>';
    editor. BlockManager.add('posts', {
        etiqueta: 'Publicaciones',
        categoría: 'Básico',
        Atributos: { Clase: 'FA FA-Portapapeles' },
        Contenido: HTML,
        Arrastrable: Cierto,
        editable: false,
    });
}