So I want to refer to the component which we have created as part of one of the pages and render the same content with the same authored data on another page, how can this be achievable?
if not with experience fragments, you'll have to deal with this in a complex way.
At the moment I could think of creating a data node where you have all the content in the jcr:content properties – from your custom component read these properties from the node from your sling model and display them on dragging it. The only thing here is you figure out how you wanna author this data node.
I would still recommend using Experience Fragments to keep it simple and author-friendly.
Earlier AEM had Reference Paragraph [1] component, which was removed from the Touch UI interface, and AEM Introduced a more flexible way to manage and use shared content, called Experience Fragments [2].
You should create xFragments for the content that is reusable, and use the Experience Fragment core component [3] on your page to refer to experience fragment.
