embed object id is null after successful post request to backend

I'm building an ember app with a Rails API backend. These are two separate apps running on two separate servers. The problem I'm having is this:

A user can successfully fill out the form with a new album with new songs and new artists. It posts the the Rails API, create action of the album's controller. New album, songs and artists are successfully created and associated. Yet, the album record that gets sent back to Ember has songs and artists, all with ids of null.

Here is the payload that gets sent back to Ember on successful insertion of new album (with associated songs and artists) record into database:

{
  album: {
  id: 1,
  name: "Purpose (Deluxe)",
  image_url: "http://ift.tt/1MCiKyF",
  artist_ids: [
    23,
    14,
    1,
    57,
    27
   ],
  song_ids: [
    1,
    3,
    4,
  ]
 }
}

And here is the save action of my albums/new controller:

save(){
  let album = this.get('model');
  album.save().then((newAlbum)=>{
      this.transitionToRoute('albums.album', newAlbum);
  });

}

Note that I am using a callback function transition routes only when Ember receives the response from the Rails API.

Some background:

The app has three models: artists, albums and songs. An album has many songs and songs belong to an album. Songs have many artists and artists have many songs. Albums have many artists through songs.

API is up and running and serving data as expected. I'm not side loading associated data.

Similarly, songs serializer serves album_id and collection of artist_ids with a given song.

Here are my Rails serializers:

Album serializer:

class AlbumSerializer < ActiveModel::Serializer
  attributes :id, :name, :image_url, :artist_ids, :song_ids
end

Artist Serializer

class ArtistSerializer < ActiveModel::Serializer
  embed :ids, include: true
  attributes :id, :name
  has_many :albums
  has_many :songs
end

Song Serializer

class SongSerializer < ActiveModel::Serializer
   attributes :id, :name, :artist_ids, :album_id
end

I'm using async: true on my Ember model definitions. Here are my ember models:

Album Model:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  imageUrl: DS.attr('string'),
  songs: DS.hasMany('song', {asnyc: true}),
  artists: DS.hasMany('artist', { async: true })
});

Artist Model

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  songs: DS.hasMany('song', { async: true }),
  albums: DS.hasMany('album', { async: true })
});

Song Model

import DS from 'ember-data';
export default DS.Model.extend({
  name: DS.attr('string'),
  artists: DS.hasMany('artist', { async: true }),
  album: DS.belongsTo('album', {async: true})
});

I'm using Ember's embedded record mixin to serialize associated data back to Rails. I have a song serializer and an album serializer.

import DS from 'ember-data';

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
     artists: {serialize: 'records'},
     album: {serialize: 'record'}
  }
});

Here is my Album Serializer

import DS from 'ember-data';

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
    songs: {serialize: 'records'}
  }
});

So, when album.save() is run, it hits Rails, creates and saves new album and associated songs and artists and that album data is correctly serialized and served back to Ember. But Ember perceives those associated songs and artists to have ids of null. Also, any records that have been seeded on the backend behave as expected in Ember--I can visit an album's show page and see a list of songs for example. But, if I manually visit localhost:4200/albums/<some album that was created via the form>, associated songs and artists don't show up.

Any help would be greatly appreciated! I'm really stuck on this.