[Vuejs]-Vue onclick delete particular row

new Vue({
  el: "#app",
  data: {
    minorsDetail: [{
      full_name: "",
      date_of_birth: "",
    }],
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    },

    addExperience() {
      this.minorsDetail.push({
        full_name: ''
      })

    },

    removeExperience: function(todo) {

      var index = this.minorsDetail.indexOf(todo)
      this.minorsDetail.splice(index, 1)
      // this.removeMinorFieldFunction();
    },

  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="work-experiences">

    <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

      <div class="col">
        <br>
        <label id="minorHeading">FULL NAME</label>
        <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg" />
        <!-- add onclick listener removeExperience for this row. all your logic is perfectly fine  -->
        <button type="button" @click="removeExperience(minordatabase)" class="btn btn-outline-info">Remove this row</button>
      </div>

    </div>

  </div>

  <br>

  <div class="form-group">
    <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
    <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
  </div>
</div>