I've written JSON exporter with Sling model to expose it as JSON. When I try to drag the component on page and then check it with <page url>.model.json - it doesn't show the component JSON. But, when I get to specific node path e.g. <page-node-path>.model.json then it returns the component JSON. Any idea why it's happening like that?
Apache Sling Models currently includes a single exporter, using the Jackson framework, which is capable of serializing models as JSON. Adobe's new core components are built with Sling Models, meaning that if you can easily build a headless AEM solution only using the core components. If you are using Adobe's core page component, layout container, responsive grid component in editable templates, you can replace ".html" with ".model.json", and you will get a JSON representation of the page structure (resourceType & all used components); assuming that you're Apache Dispatcher module rules allow you to access .model.json. e.g:https://example.com/home.model.json
Then there's no magic happening with the Jackson Exporter; all getter properties of your Sling Models class will exposed, and serialized to JSON. This means that if you run some kind of logic in your @PostConstruct method, then set the property, the computed value will be exposed in your JSON.
Sling Model Exporter works based on resource type. As per your post, you have written Sling Model exporter for Component, so .model.json works on component only. If you need the Json at page level, develop a sling model with exporter annotations for Page Resource Type