Inside crx/de, the cards node is created with the correct authoring value but on a refresh of AEM authoring env the authoring data is lost, but the cards node is still inside crx/de with all the values.
I have looked at all examples related to components inside components but couldn't find the right solution.
I am not sure if you found a solution for this. Panel based container components are not feasible directly with SPA 2.0. I provided a fix by exposing getChildComponents method from the 2.x editable components and waiting for PR to be merged.
In the interim you can have a workaround, but does require some mimimal code duplication.
Instead of using MapTo from React Editable Components, import it from @adobe/aem-spa-component-mapping and also import ComponentMapping also from this package
In your App.js or index.js wherever you are assigning mode.json response to page component , add 1 more prop componentMapping where you pass the imported ComponentMapping (mentioned in prev step)
As you are managing MapTo from your own import instead of MapTo from EditableComponents, manually mapto Responsivegrid also as it is the only mapto that happens internally within Editablecomponents lib, and since you are taking over, that will no longer have effect, and you need to do explicitly
Now using the PR below I shared, copy the method getChildComponents method and call it inside your Carousel or Tabs or Accordion kind of custom container components, and you will have all the editable children as array from this method, and render them wherever you need unlike ResponsiveGrid or Container where everything will render from top to bottom.