md-input class update issue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
    quantity: Ember.computed({
    set(key, val) {
      this.set('_quantity', val);
      return val;
    },
    get() {
      var _quantity = this.get('_quantity');

      // If undefined set a default
      if (_quantity === undefined) {
         _quantity = 1;
        this.set('_quantity', _quantity);
      }
      return _quantity;
    }
  })
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{md-input type="text" value=quantity valueChanged=(action (mut quantity)) placeholder='Quantity'}}

md-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['md-input-group'],
  _value: Ember.computed('value', {
      set(key, val) {
        this.set('_v', val);
        this.sendAction('valueChange', val);
        return val;
      },
      get() {
        var value = this.get('value');
        var _value = this.get('_v');
        if (value !== _value) {
          this.set('_v', value);
        }
        console.log(value);
        return value;
      }
  }),
  actions: {
    keyDownAction: function(value, event) {
      if (this.get('keyDown')) {
        this.sendAction('keyDown', value, event);
      }
    }
  }
});

md-input.template.hbs

{{input type=type value=_value id=id name=name tabindex=tabindex list=list key-down="keyDownAction"}}
<span class="bar"></span>
<label class="{{if _value.length 'text-present'}}">{{placeholder}}</label>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.md-input-group {
  position: relative;
  margin-bottom: 15px;
}

label {
    color: #c2c2c2;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    margin-bottom: 0;
    left: 5px;
    top: 10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
  }

  input {
    font-size: 14px;
    padding: 10px 0 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #00bcd4;
  }
  
      input:focus {
      outline:none;


    }
    input:focus ~ label {
    color: #c2c2c2;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    margin-bottom: 0;
    left: 5px;
    top: 10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
  }

  input:focus ~ label, input.validate:valid ~ label, input ~ label.text-present	{
      top: -10px;
      font-size: 11px;
    }

    input.validate + .bar:before {
      background: #4CAF50;
    }

    input:focus ~ .bar:before {
      width: 100%;
    }

  /* Bottom bar */
  .bar 	{
    position: relative;
    display:block;
    width: 100%;
   }

  .bar:before {
    left: 0%;
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #00bcd4;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  };
      }

    input.validate:valid {
      border-bottom-color: #4CAF50;


    }
  
        input ~ label {
        color: #4CAF50;
      }

  input:focus ~ label, input.validate:valid ~ label, input ~ label.text-present	{
      top: -10px;
      font-size: 11px;
    }

    input.validate + .bar:before {
      background: #4CAF50;
    }

    input:focus ~ .bar:before {
      width: 100%;
    }

  /* Bottom bar */
  .bar 	{
    position: relative;
    display:block;
    width: 100%;
   }

  .bar:before {
    left: 0%;
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #00bcd4;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}