AEM Sling Model example for handling multi-fields components and exporting it into model.json while working with SPA

MultifieldExampleModel.java

package com.surajkamdi.aem.core.models;

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import java.util.Collection;
import javax.annotation.PostConstruct;
import org.apache.commons.collections4.CollectionUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ChildResource;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

/**
 * Multifield Example model.
 * @author suraj.kamdi
 */
@Model(
    adaptables = SlingHttpServletRequest.class,
    adapters = ComponentExporter.class,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
    resourceType = MultifieldExampleModel.RESOURCE_TYPE)
@Exporter(
    name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
    extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class MultifieldExampleModel implements ComponentExporter {

  protected static final String RESOURCE_TYPE = "/app/sample-project/components/multifield-component";

  @ValueMapValue(name = "streetNumber")
  private String streetNumber;

  @ValueMapValue(name = "street")
  private String street;

  @ValueMapValue(name = "state")
  private String state;

  @ValueMapValue(name = "country")
  private String country;
    
  //Multifield Child Resource for social links
  @ChildResource(name = "socialLinks")
  Collection<SocialLinksModel> socialLinks;

  @PostConstruct
  protected void init() {
    socialLinks = CollectionUtils.emptyIfNull(this.socialLinks);
  }

  public String getStreetNumber() {
    return streetNumber;
  }

  public String getStreet() {
    return street;
  }

  public String getState() {
    return state;
  }

  public String getCountry() {
    return country;
  }

  public Collection<SocialLinksModel> getSocialLinks() {
    return socialLinks;
  }

  @Override
  public String getExportedType() {
    return RESOURCE_TYPE;
  }

}

SocialLinksModel.java

package com.surajkamdi.aem.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

/**
 * Social Links Sling Model. (Multifield Child Resource for social links)
 * @author suraj.kamdi 
 */
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class SocialLinksModel {

  @ValueMapValue(name = "socialSiteName")
  private String socialSiteName;

  @ValueMapValue(name = "socialSiteUrl")
  private String socialSiteUrl;
}

this is my child class

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CarouselItem {

@ValueMapValue(name = "image")
private String image;

@ValueMapValue(name = "imagealt")
private String imagealt;

@ValueMapValue(name = "slideDescription")
private String slideDescription;

}

below is my main class
import org.apache.sling.models.annotations.injectorspecific.ChildResource;

import java.util.Collection;

import javax.annotation.PostConstruct;

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.fasterxml.jackson.annotation.JsonProperty;
import com.tlc.aem.brand.delivery.models.Carousel;
import com.tlc.aem.brand.delivery.models.bean.CarouselItem;

import org.apache.commons.collections4.CollectionUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@model(adaptables = {
SlingHttpServletRequest.class
}, adapters = {
ComponentExporter.class
}, resourceType = CarouselImpl.RESOURCE_TYPE)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class CarouselImpl
implements ComponentExporter
{

protected static final String RESOURCE_TYPE = "brand/components/carousel";

@ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
private String title;


@ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
private String type;

@ChildResource(injectionStrategy = InjectionStrategy.OPTIONAL)
private Collection<CarouselItem> carouselslides;
  

@SlingObject
private Resource resource;
 

public Collection<CarouselItem> getCarouselslides() {
	return carouselslides;
	
}

@PostConstruct
protected void init() {
    carouselslides = CollectionUtils.emptyIfNull(this.carouselslides);
}

@Override
public String getExportedType() {
    // TODO Auto-generated method stub
    return RESOURCE_TYPE;
}

}

Still multifield data is not coming as json