无法在Vuejs中获取$emit以将属性传递给父级

Vue.component("todo-item", {
  props:["item"],
  template: `
<li>{{ item.text }} 
  <button 
    @click="$emit('remove-item', {{item.id}} )">
    Remove
   </button>
</li>`
})

let vm = new Vue({
  el:"#app",
  data: {
    text: "",
    todos: []
  },
  methods: {
    getID: (function() {
      let id = 0;
      return function() {
        return id++;
      }
    }()),
    addTodo: function() {
      this.todos.push({id: this.getID(), text: this.text});
      this.text = "";
    },
    remove: function(remove_id) {
      this.todos = this.todos.filter(({id}) => id != remove_id);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div id="container">
    <main>
      <ul>
         <todo-item
                    v-for="todo in todos"
                    :item="todo"
                    @remove-item="remove"
                   >
          </todo-item>
      </ul>
    </main>
  <div id="add-field">
  <input v-model="text" /> <button id="add" @click="addTodo">Add Todo</button>
    </div>
    </div>
</div>