Ember observer not changing field value

So I'm new to Ember and have been doing some digging around for the a while looking for the answer to this.

What I have is a field and I want to restrict the use of whitespace (basically if the user hits the spacebar, I don't want it to do anything).

The issue, is that I can still hit the spacebar and add multiple spaces, and it's not until I hit another character that the value loses all the whitespace (To help this description, instead of swapping spaces, I'm going to swap the letter 'a').

So far I have an observer and a function (in my component js file):

emailChanged: Ember.observer('email', function() {
  // console.log('email changed');
  Ember.run.once(this, 'formatEmail');
}),

formatEmail() {
   // console.log('email', this.get('email')); 
   this.set('email', this.get('email').replace(/a/g, ''));
  // console.log('should be', this.get('email'));
},

So what is happening is that (when I use the console logs).

If I type a 'b' character in the console I get, email changed, then email b, then should be b.

When I type 'a', in the console I get email changed then email ba, then formatEmail() actually runs and changes the email, so then I get should be b, email b, should be b.

But it's still displaying 'ba'.

Hard to explain this, but basically, it looks like set is working, except that it's not changing what is displayed on the screen.

Ember-twiddle