Hi @Manu_Mathew_, I think that the root cause of the problem is the way how List component has been implemented. First of all if you would like to see nested structure inside the Content Tree your wrapping component needs to contains property cq:isContainer set to true. Usually containers use parsys to allow authors put some other components inside.
List component from weretail is not configured as a container, it's because it's showing the references to other pages/elements as a grid or list - depending on configuration. Also configuration can change how items inside will be displayed, e.g. if you edit List component and change Type to Default (on Item Settings tab) you will see that Content Tree will present only List component instance itself. It is because in this mode additional resources are not used/included - in Article mode Image component resource is part of each element.
This is second aspect related to Content Tree - you can see in the page source that html markup that allows to edit each item located inside List is actually outside list component - and this is also reflected by Content Tree.
Summarizing following 2 aspects are required to display hierarchy under Content Tree
- Outer component needs to have cq:isContainer set to true.
- Inner component(s) needs to be implemented in the way that in edit mode their markup will be located inside specific outer component. This could be achieved using parsys and putting inner components into it.
Good example could be Layout Container component.