data-sly-resource inside other components

[sreenu539]

Usecase: image, some custom elements, cf paths and a CTA/button.

I created two components one by super typing image v2, another by super typing with teaser v2.

Now I am trying to include button component inside above two components, so author can reuse existing button component

<div data-sly-resource="${'button' @ resourceType='mysite/components/content/button'}"></div>

or

<sly data-sly-resource="${'button' @ resourceType='mysite/components/content/button'}"></sly>

I am not able to see these components inside extended teaser , image components.

I added cq:isContainer {Boolean}true for above components. What am I  missing? What are the other ways anyone achieved this use case.

Any ideas?

Thanks for the help.

-Sri

[Sady_Rifat · Accepted solution]

I don't think you missed anything. Make sure you give the correct component path. 
If your components are version maintainable, then add the proper path. ex: mysite/components/content/button/v1/button

In another way, you can diagnose it. On the top of the button component HTML add this script and see in the teaser component title is showing or not. Or check in publish mode for the button component markup.

<sly data-sly-test="${wcmmode.edit}">
    <div class="component-title">${component.title}</div>
</sly>