Ember js - saving models with relationship

My server is returning a json data and I have no problem loading the models (page.js, event.js, choice.js) with Ember Data. But when the form is submitted, the JSON data submitted to the server doesn't contain the related models (event.js, choice.js).

Below are my files and the json data.

Json data returned by backend api:

{
   "data":    {
      "type": "pages",
      "id": "12345",
      "attributes":       {
         "guest_id": null,
         "name": null,
         "email": null,
         "address": null
      },
      "relationships": {"events": {"data":       [
                  {
            "type": "events",
            "id": "67891"
         },
                  {
            "type": "events",
            "id": "90908"
         }
      ]}}
   },
   "included":    [
            {
         "type": "events",
         "id": "67891",
         "attributes":          {
            "event_id": "67891",
            "name": "Event 1"
         },
         "relationships": {"choices": {"data":          [
                        {
               "type": "choices",
               "id": "67891-11111"
            },
                        {
               "type": "choices",
               "id": "67891-22222"
            }
         ]}}
      },
            {
         "type": "events",
         "id": "90908",
         "attributes":          {
            "event_id": "90908",
            "name": "Event 2"
         },
         "relationships": {"choices": {"data":          [
                        {
               "type": "choices",
               "id": "90908-11111"
            },
                        {
               "type": "choices",
               "id": "90908-22222"
            }
         ]}}
      },
            {
         "type": "choices",
         "id": "67891-11111",
         "attributes":          {
            "choice_id": "67891-11111",
            "name": "Diet choice",
            "value": "0"
         },
         "relationships": null
      },
            {
         "type": "choices",
         "id": "",
         "attributes":          {
            "choice_id": "67891-22222",
            "name": "No. of adult guest",
            "value": "0"
         },
         "relationships": null
      }
            {
         "type": "choices",
         "id": "90908-11111",
         "attributes":          {
            "choice_id": "90908-11111",
            "name": "Diet choice",
            "value": "0"
         },
         "relationships": null
      },
            {
         "type": "choices",
         "id": "90908-22222",
         "attributes":          {
            "choice_id": "90908-22222",
            "name": "No. of adult guest",
            "value": "0"
         },
         "relationships": null
      }
   ]
}

JSON data submitted to the server

    {
        "data": {
            "id":"e47e8358-0f18-4607-b958-2877155bf5be",
            "attributes":{
                "guest_id":null,
                "name":"my name",
                "email":"myemail@gmail.com",
                "address":"myaddress"
            },
            "relationships":{
                "events":{
                    "data":[
                        {
                            "type":"events",
                            "id":"67891"
                        },
                        {
                            "type":"events",
                            "id":"90908"
                        }
                    ]
                }
            },
            "type":"pages"
        } 
}

/pages/show.hbs

<p>
    <label>Name: </label>
    
</p>


    <h3>
        
        <!-- Rounded switch -->
        <label class="switch">
          <input type="checkbox" class="switch_input" id="">
          <span class="slider round"></span>
        </label>
    </h3>

    
        
            <p>
                <label for="diet_choice">:</label>
                <select id="diet_choice" value=choice.value>
                    <option value="anything">Anything and Everything</option>
                    <option value="vegetarian">Vegetarian</option>
                    <option value="hala">Hala</option>
                </select>
            </p>
        
        
            <p>
                Adult guest
                <div>
                    <button type="button" name="btnMinusGuest" >-</button>
                    
                    <button type="button" name="btnPlusGuest" >+</button>
                </div>
            </p>
        
    


<p>
    <label for="email">Email:</label>
    
</p>
<p>
    <label for="address">Address:</label>
    
</p>
<p>
    <input type="submit" name="btnSubmit" value="Submit"  />
    <input type="submit" name="btnCancel" value="Cancel"  />
</p>

/routes/pages/show.js

import Route from '@ember/routing/route';

export default Route.extend({
    queryParams: {
        event: ''
    },
    model(params) {
        return this.get('store').findRecord('page', params.page_id, { adapterOptions: {query: {'event': params.event}}});
    },
    actions: {
        submit() {
            // Create rec
            page.save().then(function() {
                console.log('submitted');
            }).catch(function(reason) {
                console.log(reason);
            });
        },
        cancel() {
            alert("Are you sure?");
        },
        addCounter(item, max_val, msg) {
            let current_val = parseInt(item.get('value'));
            if (current_val >= max_val) {
                alert(msg)
            } else {
                item.set('value', current_val + 1);
            }
        },
        minusCounter(item, min_val, msg) {
            let current_val = parseInt(item.get('value'));
            if (current_val <= min_val) {
                alert(msg);
            } else {
                item.set('value', current_val - 1)
            }
        },
    }
});

/models/page.js

import DS from 'ember-data';

export default DS.Model.extend({
    guest_id: DS.attr(),
    name: DS.attr(),
    email: DS.attr(),
    address: DS.attr(),
    is_e_invite: DS.attr(),
    data_time_submitted: DS.attr(),
    events: DS.hasMany('event')
});

/models/event.js

import DS from 'ember-data';

export default DS.Model.extend({
    event_id: DS.attr(),
    name: DS.attr(),
    choices: DS.hasMany('choice')
});

/models/choice.js

import DS from 'ember-data';

export default DS.Model.extend({
    choice_id: DS.attr(),
    name: DS.attr(),
    value: DS.attr()
});