Передача родительской функции дочернему компоненту в VueJS

У меня есть практика в VueJS 1.0, и я изучаю компоненты. в этом example есть элемент input и должен поставлять coupon или какой-либо a code из API. и я должен проверить. У меня есть мой компонент <coupon > и имеет реквизиты when-applied. when-applied должен вызывать родительскую функцию setCoupon, но она не будет.

Я получил эту ошибку this.whenApplied is not a function.

    <div id="demo" class="list-group">
        <script id="coupon-template" type="x-template">
            <input type="text" v-model="coupon" v-on:blur="whenCouponHasBeenEntered">
            <div v-text="text"></div>
        </script>
      <coupon when-applied="setCoupon"></coupon>
    </div>

Вот мой app.js файл

Vue.component('coupon', {
  template: '#coupon-template',

  props: ['whenApplied'],

  data: function() {
    return {
      coupon: '',
      invalid: false,
      text: ''
    } 
  },


  methods: {
    whenCouponHasBeenEntered: function() {
      this.validate();
    },

    validate: function() {
      if( this.coupon == 'FOOBAR') {
        this.whenApplied(this.coupon);
        return this.text = '20% OFF!!';
      }

      return this.text = 'that coupon doesn`t exists';
    }
  }
});

new Vue({
  el: '#demo',

  methods: {
    setCoupon: function(coupon) {
      alert('set coupon'+ coupon);
    }
  }
});

Помогите кому-нибудь. Предложения в значительной степени оценены.

Ответ 1