vuejs v модель мгновенного обновления, выбрав html

Question

Я очень новичок в vue и у меня есть вопрос.

У меня есть следующий календарь в формате html.

<div class="year">2018</div>
<div class="month  disabled">JAN</div>
<div class="month  disabled">FEB</div>
<div class="month  disabled">MAR</div>
<div class="month  disabled">APR</div>
<div class="month  disabled">MAY</div>
<div class="month  disabled">JUN</div>
<div class="month  disabled">JUL</div>
<div class="month  disabled">AUG</div>
<div class="month  disabled">SEP</div>
<div class="month  disabled">OCT</div>
<div class="month  disabled">NOV</div>
<div class="month  ">DEC</div>
<br>

    <div class="year">2019</div>
    <div class="month  disabled">JAN</div>
    <div class="month  disabled">FEB</div>
    <div class="month  disabled">MAR</div>
    <div class="month  disabled">APR</div>
    <div class="month  disabled">MAY</div>
    <div class="month  disabled">JUN</div>
    <div class="month  disabled">JUL</div>
    <div class="month  disabled">AUG</div>
    <div class="month  disabled">SEP</div>
    <div class="month  disabled">OCT</div>
    <div class="month  disabled">NOV</div>
    <div class="month  ">DEC</div>
    <br>
    <div>
        {{product_list}}
    </div>
</div>

Каждый раз, когда пользователь нажимает месяц, я хочу обновить product_list, показывающий только элементыв том же месяце.Месяц многоселективен.можно выбрать только div без отключения

Например, когда пользователь выбирает JAN, MAR в 2018 году, я хочу показать продукты с датой в JAN и MAR в 2018.

вот один и тот же список продуктов

 $product = [
            "id" => 1,
            "productDates" => [
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2018-12-11"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-3-11"
                ],
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2019-12-11"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-4-11"
                ],
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2018-4-12"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-5-21"
                ],
            ]
        ];


 var opVm = new Vue({
        el: "#departure-date-list",
        data: {
            seasons:{!! json_encode($seasons) !!},
            product:{!! json_encode($product) !!},
            productDates:{!! json_encode($product->productDates) !!},
            datePax:{!! json_encode($datePax) !!},
        },
        methods: {
            select:function(year,month){
                console.log(year);
            }
        }
    });