I have a filter search that shows matching strings of an array in a list when user types. When the user clicks on one item of the list, a method should fire. Everything works fine, but the problem is that it doesn't fire on first click but a on a second attempt on the same item of the list or any other it works. I can't figure out why is this happening. Here's my code.

<div 
  class="filter-form"
  :class="{'visible': filterVisibility[index]}"
  v-if="col.filter"
>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      @keyup="filterColumn($event, index)"
      @blur="toggleFilter(index)"
    >
    <button
      class="btn btn-secondary"
      type="button"
      @click="toggleFilter(index)"
    >Filtrar</button>
  </div>
  <ul class="filter-matches list-group">
    <li
      class="list-group-item"
      v-for="match of filteredMatches"
      :key="match"
      @click="clickFilteredMatch(String(match), index)"
    >{{match}}</li>
  </ul>
</div>