I am making a website that has a select form and datepicker form that sends an API request for data. I want to the update the data on every change of these forms, then a "submit" button is not required.

The select works perfectly by using the "@change", but this does not have any effect on the datepicker.

The template is.

<div class="d-flex flex-row flex-nowrap">

            <b-form-select v-model="region"

                           :options="regions"

                           class="select_box"

                           @change="get_data()"

            />

            <b-form-datepicker id="first_day_datepicker"

                               v-model="first_day"

                               :min="min_day"

                               :max="max_day"

                               class="mb-2"

                               @change="get_data()"

            />

            <b-form-datepicker id="last_day_datepicker"

                               v-model="last_day"

                               :min="min_day"

                               :max="max_day"

                               class="mb-2"

                               @on-change="get_data()"

            />

</div>

And the funtcion looks like this(simplified for example)

methods: {

        get_data() {

            console.log("Change data")

        },

}