when calling function, for example on click it doesn't matter if I write curly braces or not. It works in both scenarios. But I made a function, which fires custom event from a child. then I await it in a parent component and fire my function (which is in parent), to update state. I noticed when I write curly braces on that function, vue returns an error. why is that happening? (I'm new to vue js :) ).

function in a child component, which is invoked on click:

  toggleFavorite: function () {
          this.$emit("toggle-favorite", this.id);
        }

A child component rendered inside a parent

<friend-contact
      v-for="friend in friends"
      :data="friend"
      :key="friend.id"
      @toggle-favorite="toggleFavorite"> // if i write 'toggleFavorite()' here, I am 
                                         // geting an error
                                         
    </friend-contact>

A function which is fired on custom event

 toggleFavorite: function (id) {
      let friendToUpdate = this.friends.find((el) => el.id === id);
      friendToUpdate.favorite = !friendToUpdate.favorite;
    }