Sync drawings between two maps Leaflet.draw

I have two maps, a large map, and a small filter map on the side. I am using Leaflet.draw to draw shapes on them, and using those shapes to filter. I have a need to sync the shapes between the two maps. Currently, I am doing something like this:

//Add shapes to the shapes array when they are created, so we can sync them
    map.on('draw:created', function(e) {
      var layer = e.layer;
      this.get('mapShapes').pushObject(layer);
    }.bind(this));
    //Remove shapes from the array when deleted from the map
    map.on('draw:deleted', function(e) {
      var layers = e.layers._layers;
      for (var layer in layers) {
        if (layers.hasOwnProperty(layer)) {
          this.get('mapShapes').removeObject(layers[layer]);
        }
      }
    }.bind(this));

This allows me to add or remove the shapes drawn from an array to keep track of what shapes should be on the maps. This works in a basic sense, but simply adding the shapes to the other map does not register them as shapes with Leaflet.draw, so the edit tools and such stay greyed out. I am adding the layer like this:

syncMapShapes: function() {
  if (this.get('isGeoRoute')) {
    var mapShapes = this.get('mapShapes');
    var map = this.get('map');
    mapShapes.forEach(function(shape) {
      map.addLayer(shape);
    });
  }
}.observes('mapShapes.@each'),

Is there a better way to keep the two maps in sync and how can I get the second map to recognize the shape is drawn and not just a random added layer, so that I can edit and such?