Reset input on click, vue

It's very simple, in the addTask() just add event as parameter and in the end of the function you write: event.target.reset();

Code:

<template>
  <div class="col-md-6" >
    <div class="card bg-light mt-4">
      <div class="card-header">Task Form</div>

        <div class="card-body">
          <form action="./api/word" method="post" @submit.prevent="addTask">

            <div class="form-group">
              <input type="text" name="title" v-model="title" placeholder="Local word" class="form-control">
            </div>
            <div class="form-group">
              <input type="text" name="second_title" v-model="second_title" placeholder="Foreign word" class="form-control">
            </div>
            <div class="form-group">
              <input type="submit" value="Add Task" class="btn btn-info">
            </div>
          </form>
        </div>

      </div>
  </div>
</template>

And there:

export default {
  data() {
    return {
      title: '',
      second_title: ''
    }

  },
  mounted() {
    console.log('Component mounted.')
  },
  methods: {

    addTask(event) {
      Event.$emit('taskCreated', {
        title: this.title,
        second_title: this.second_title
      });
      axios.post('./api/word', {
        title: this.title,
        second_title: this.second_title,

      })
      this.title = '';
      this.second_title = '';

      event.target.reset();
    }

Hope it works for you ; )