Why v-model not working in input datetimepicker bo

Question

My vue component, you can see this below :

<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <input v-model="fromDate" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required>
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group" style="text-align: center">
                -
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">                           
                <input v-model="toDate" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required>
            </div>
        </div>
        <div class="col-sm-4">
            <button v-on:click="filter()" class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return{
                fromDate: '',
                toDate: ''
            }
        },
        methods: {
            filter: function() {
                console.log(this.fromDate)
                console.log(this.toDate)
            }
        }
    }
</script>

When I select datepicker and click search button, it does not success to get value of datepicker

I try console.log, but the result empty

Is there anyone who can help me?