Фильтрация многомерного массива в vue js с использованием возвращаемой строки даты (месяца) [с использованием 2 кнопок]

Question

a.) 1-й файл Vue

<template>
<b-container id="b_container2" fluid>
    <div id="Month_Date">
        <h1 id="date-head"> {{ Buwan.Date }} </h1>                    
        <p id="p2"> {{ Buwan.Month }} </p>
    </div>
    <div id="Holiday-Description">
        <h2> {{ Buwan.Title }} </h2>
        <p id="p1"> {{ Buwan.Description }} </p>
    </div>
</b-container>  </template>

<script>
export default {
    data() {
        return {
        }
    },
    props: {

        Buwan: {
            required: true,
        }
    } } </script>

b.) 2-й файл Vue

    <template>
    <b-container id="b_container1" fluid>
            <thead id="t_head">{{ today }}</thead>
               <div class="icon_chev">
                    <i id="icon_chev_down" button class="fas fa-chevron-circle-down" @click="downMonth"></i>
                    <i id="icon_chev_up"   button class="fas fa-chevron-circle-up"   @click="upMonth"></i>
                </div>
    </b-container>       
</template>

    <script>
    import moment from 'moment'
    export default {
        data() {
            return {
                today: null,
            }
        },
        methods: {        
            todayMonth() {
                let date = moment().format('MMMM YYYY')
                this.today = date
            },
            downMonth() {
                let sub = moment(new Date(this.today)).subtract(1, 'M').format('MMMM YYYY')
                this.today = sub
            },
            upMonth() {
                let sub = moment(new Date(this.today)).add(1, 'M').format('MMMM YYYY')
                this.today =  sub
            },
        },
        mounted() {
            this.todayMonth()
        }
    }       
    </script>

c.) 3-й файл Vue Здесь я отображаю первые 2 файла.

<template>
<div class="Home-backgroundcolor" id="home">
    <b-container fluid>
        <b-row>
            <b-col lg="8">
                <Table />
            </b-col>
            <b-col >
                <UpcomingHolidaysHeader />
                <UpcomingHolidays v-for="Buwan in Buwans" v-bind:key="Buwan.id" :Buwan="Buwan" />
            </b-col>
        </b-row>
    </b-container>
</div>
</template>

<script>
import UpcomingHolidays from '../components/AdminDashboard/UpcomingHolidays';
import UpcomingHolidaysHeader from '../components/AdminDashboard/UpcomingHolidaysHeader';
export default {
    data() {
    return {
            Buwans: [
                {
                    id: 1,
                    Month: 'January',
                    Date: '1',
                    Title: 'New Year',
                    Description: 'Description',
                },
                {
                    id: 2,
                    Month: 'February',
                    Date: '14',
                    Title: 'Valentines',
                    Description: 'Description',
                },
                {
                    id: 3,
                    Month: 'January',
                    Date: '8',
                    Title: 'Nazarene',
                    Description: 'Description',
                },
            ]
    }
}
</script>

Im still new to vue and javascript. And a slow learner. And its quite hard since english isn't my first language. Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit.Sed accumsan varius massa eu pretium.Duis et feugiat augue, id pellentesque neque.Сед претиум, магна вальватпаквот, нисл долор хендрерит нибх, на коммодо кваке нэк сед велит.В ac velit vitae risus blandit accumsan id eu ligula.Fusce iaculis arcu vel dolor aliquam, vitae mattis ipsum congue.Nam accumsan in lacus eget gravida.Fusce vel tempus neque.Praesent Sed Nibh Turpis.Phasellus tristique eleifend gravida.Nulla facilisi.Приостановить сидение Amet dictum nulla.Sed tempus enim eu lobortis sodales.Maecenas egestas augue quis luctus iaculis.Fusce eu placerat erat, vitae bibendum purus.Пребывающий темп Рисус Ниси, Quis vestibulum mauris tincidunt interdum.