¿Puedo establecer el valor de bucle en el renderizado de componentes?

Hola, soy principiante en uvas. Quiero hacer un número de pregunta por el bucle for cuando dejé de lado componentes, ↓Quiero la final como esta imagen. El div puede mostrar el número de bucle. ! 01

↓Código de mi componente

 HTML por defecto
    const questionCom = 
   '<div class="gjs-row">
        <div class="gjs-cell">{{i}}</div> Variable //number
        <div class="gjs-cell"></div>
    ';</div>

    const dc = editor. DomComponents;
    const textType = dc.getType('text');
    editor. BlockManager.add('m2', {
            etiqueta: "número de pregunta",
            ACTIVAR: Cierto,
            Contenido: {
                Tipo:'M2',
                questionCom ,
         
},  
        }),
        dc.addType('m2', {
            model: textType.model.extend({
                //...     
                }
            }),
            view:textType.view.extend({
                onActive(){
                    //...
                },
                render(val) {
                    var a=""
                    this.model.set('components', 
                          función a1(){ //on onActive I llamo función a1
                               for(var i=0; i<3; i++){ 
                                    a+='<div class="gjs-row"><div class="gjs-cell">'+
                                           val+
                                           '</div><div class="gjs-cell"></div></div>'
                                }   
                                devolver a         
                            }
                       }
                      devuelvo esto;
                },
            })
        });

En renderizado, dividí mi html predeterminado QuestionCom de {{i}} en frente y reverso. Luego, ponlos en renderizado. {{i}} puede ser perfecto para mostrar 1 2 3 en componente.

Pero el método dividido no es bueno. HTML no es fácil de leer y no puedo configurar HTML complejo si quiero, por ejemplo↓

<div class="gjs-row"> //one div
        <div class="gjs-cell"> //dos div
               <div class="gjs-row"> //tres div
                        <div class="gjs-cell">{{i}}</div> //cuatro div
                        <div class="gjs-cell"></div>
                 </div> 
         </div> 
        <div class="gjs-cell"></div>
    </div>

¿Existe algún método mejor que pueda resolver mi pregunta? ¡Gracias!