How to do it...

To start our component, we can create our Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Creating an input form with two-way data binding' recipe.

Follow these steps to add an event listener in an element on Vue:

1. Create a new component or open the TaskInput.vue file.
2. At the <template> part, we are going to add a button element and add an event listener to the button click event with the v-on directive. We will remove the {{ task }} variable from the component, as from now on it will be emitted and won't be displayed on the component anymore:

<template>
  <div class='cardBox'>
    <div class='container tasker'>
      <strong>My task is:</strong>
      <input 
        type='text' 
        v-model='task' 
        class='taskInput'...