Tengo un componente de lista personalizado gcl-list que usa v-for para representar una plantilla aprobada para cada elemento en una matriz. He anidado uno de estos componentes en otro y estoy tratando de acceder a las referencias en los gcl-list-items los niños para luego editar el HTML interno, pero cuando accedo a esa referencia, me da una representación de cadena del elemento que no puedo editar el HTML interno. ¿Cómo accedería a ese intervalo de niños y cambiaría su HTML interno?

Salida a la consola al registrar childItemRefs.value:

 Proxy handler: {get: function, set: function, deleteProperty: function, has: function, ownKeys: function} target: Array (2) 0 <span data-v-2b58c258>Three.One</span> 1 <span data-v-2b58c258>Three.Two</span>

Código:

 <gcl-list :listArray="filteredDropdownItems"> <template v-slot="itemData"> <gcl-list-item selectable :indeterminate="itemData.item.indeterminate" :checked="itemData.item.selected" :iconStart="itemData.item.iconStart" :iconEnd="itemData.item.iconEnd" @click.stop @click="onItemClick(itemData.item)" > <span :ref="el => itemRefs[filteredDropdownItems.indexOf(itemData.item)] = el"> {{ itemData.item.displayValue }} </span> </gcl-list-item> <gcl-list v-if="itemData.item.childItems" :listArray="filteredChildren(itemData.item.childItems)"> <template v-slot="childItemData"> <gcl-list-item selectable nested :checked="childItemData.item.selected" :iconStart="childItemData.item.iconStart" :iconEnd="childItemData.item.iconEnd" @click.stop @click="onChildItemClick(childItemData.item, itemData.item)" > <span :ref="el => childItemRefs[filteredChildren(itemData.item.childItems).indexOf(childItemData.item)] = el"> {{ childItemData.item.displayValue }} </span> </gcl-list-item> </template> </gcl-list> </template> </gcl-list> ``` [1]: https://i.stack.imgur.com/1dFTx.png