$emit未正确触发根方法

我只是在学习vue,在使用$emit时遇到了麻烦。这是我的代码,还有一些无关的测试混乱。

控制台。来自组件的日志正在工作,Vue控制台工具显示事件正在发生。我的根元素似乎没有捕捉到发射。

我希望点击输入收音机调用组件方法 changeCustomer ,然后开火 this.$emit('change-customer'); ,我希望根元素能抓住它 v-on:change-customer="changeCustomer" 或 @change-customer="changeCustomer2 (两次尝试),然后我有一个控制台。登录这些方法中的每一种,但它们都不是日志。

我猜这是件小事,但任何帮助都是非常感谢的!

html:

<div id="customer-lookup"
    v-on:change-customer="changeCustomer">
    <label for="customer-lookup-input">Customer lookup</label>
    <input type="search"
           name="customer-lookup-input"
           id="customer-lookup-input"
           @keyUp="search"
           v-model="customerLookupInput"
           @change-customer="changeCustomer2"
    />
    <customer-result :results="results"></customer-result>
  </div>

js:

Vue.component('customer-result', {
    props: {
      results: {
          type: Array,
          required: false,
      }
    },
    // language=Vue
    template: `
    <ul>
      <li v-for="result in results" :key="result.id" class="customer-result">
          <input type="radio" 
                 :value="result.pk" 
                 name="selected-customer" 
                 v-model="customerRadio"
                 @change="changeCustomer"
          />
          <span class="customer-name">{{ result.name }}</span>
          <span class="customer-address_1" v-if="result.address_1">{{ result.address_1}}</span>
          <span class="customer-address_2" v-if="result.address_2">{{ result.address_2}}</span>
          <span class="customer-address_3" v-if="result.address_3">{{ result.address_3}}</span>
          <span class="customer-city" v-if="result.city">{{ result.city}}, </span>
          <span class="customer-state" v-if="result.state">{{ result.state}}</span>
          <span class="customer-country" v-if="result.country">{{ result.country}}</span>
          <span class="customer-email" v-if="result.email">{{ result.email}}</span>
          <span class="customer-phone" v-if="result.phone">{{ result.phone}}</span>
      </li>
    </ul>
    `,
    data(){
        return {
            customerRadio: null
        }
    },
    methods: {
        changeCustomer(){
            console.log('component change customer');
            this.$emit('change-customer');
        }
    }
});

var app = new Vue({
    delimiters: ['[[', ']]'], // django
    el: '#customer-lookup',
    methods: {
        search(e){
            if( this.customerLookupInput === "" ){
                this.results = null;
            } else {
                searchCustomers(this.customerLookupInput, this); // ajax call that's working
            }
        },
        updateResults(results){
            this.results = results; // update from ajax that's working
        },
        changeCustomer(){
            console.log('root change customer')
        },
        changeCustomer2(){
            console.log('root2 change customer');
        }
    },
    data() {
        return {
            customerLookupInput: null,
            results: null,
            customerRadio: null
        }
    }
});