I have a custom list component gcl-list that uses a v-for to render a passed template for each item in an array. Ive nested one of these components in another and am trying to access refs on the children gcl-list-items to then edit the innerHTML but when I access that ref it gives me a string representation of the element which I cant edit the inner HTML. How would I access that childs span and change its innerHTML?

Output to console when logging 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>

Code:

<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