What's the best way to track and store page edits persistently?

[ghost]

We have two pages in our GrapeJS editor.

Our GrapeJS data is structured like:

{
  "id": "PROJECT_ID",
  "data": {
      "assets": [],
      "styles": [],
      "pages": [
         {} // this obj has all the stuff for page 1
         {} // this obj has all the stuff for page 2
      ],
      "symbols": [],
      "dataSources": []
  }
}

Each time we make a change to a page

The new version of the page should be saved

What's the best way to implement this?

Currently, I'm thinking of creating an object like below

Each time we edit a page, we add a new object to the corresponding page with its new changes

"allPageVersions": [
  page1: [{}, {}] // new objs will be added every time we save page1
  page2: [{}, {}] // new objs will be added every time we save page2
]

We'll store the object above in our GrapeJS data like

{
  "id": "PROJECT_ID",
  "data": {
      "assets": [],
      "styles": [],
      "pages": [
         {} // this obj has all the stuff for page 1
         {} // this obj has all the stuff for page 2
      ],
      "allPageVersions": [
          page1: [{}, {}] // new objs will be added every time we save page1
          page2: [{}, {}] // new objs will be added every time we save page2
      ]
      "symbols": [],
      "dataSources": []
  }
}

Is there a better way to do this?