Why is the function not working in Vue?

Question

Vue.js

Good day everyone.
In this case, there are two components: parent-todoList, child-todoItem.
I hung the @click directive on the button in todoItem and I pass the click on the parent element, but an error pops up.

Error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
found in
---> at src/components/TodoItem.vue
at src/components/TodoList.vue
at src/App.vue


todoList:

<template>
  <div>
    <TodoItem item='sdfsdf' succesItem='succesItem'></TodoItem>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default{
  name: 'TodoList',
  data() {
    return {
      items: this.$store.getters.posts
    };
    
  },
  components: {
    TodoItem,
  },
  methods: {
    succesItem() {	
      console.log(1);
    }
  }
}
</script>

todoItem:

<template>
  <div class="main">
    <div class="text">{{ item }}</div>
    <div class="buttons">
      <button @click='succesItem'>button1</button>
      <button>button2</button>
    </div>
  </div>
</template>

<script>
export default{
  name: 'TodoItem',
  props: ['item', 'succesItem']
  
}
</script>

Answer 1

In the mind, such things are done through emit.
The component emits an event, the parent handles it.
In component: In parent:
<button @click="$emit('success')">button1</button>

<TodoItem item='sdfsdf' @success='succesItem'></TodoItem>