Как правильно показать отфильтрованные данные с календаря?

Question

[adizh]

Есть приложение budget app, в котором нужно фильтровать покупки нас основе выбора месяца(dropdown), по фильтруется только первая покупка.
dropdown:

<div class="selectMonth">
      <p @click="areOptionVisible = !areOptionVisible" class="selected">
        {{ selectedMonth }}
      </p>
      <div
        class="options"
        v-show="areOptionVisible"
        v-for="option in options"
        :key="option.value"
        @click="selectMonth(option)"
      >
        <p :value="option.value">{{ option.name }}</p>
      </div>
    </div>

selectMonth:

selectMonth(option) {
      this.selectedMonth = option.name;
      this.areOptionVisible = false;
this.sortedPro=[...this.products]
return this.sortedPro=this.sortedPro.filter((item) => {
  return item.dateInput.split('-')[1].split('')[1] //2022-02-26 === +option.value //номер месяца


      })
    },

Отрисовка данных происходит через:

filteredPro(){
      if(this.sortedPro.length){
        return this.sortedPro
      }
       else{
         return this.products
       }
    }

Данные:

<div class="expenses" v-show="this.filteredPro.length">
      <table class="table table-bordered border-primary today_tables">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Date</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody v-for="(pro, index) in filteredPro" :key="todo.id">
          <tr>
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ pro.name }}</td>
            <td>{{ pro.price }} сом</td>
            <td>{{ pro.dateInput | moment }}</td>
            <td>
              <button class="btn btn-success" @click="editTodo(index)">
                edit
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>