为什么v-model在输入datetimepicker bootstrap中不起作用？ （Vue.JS 2）

Question

我的vue组件，您可以在下面看到：

<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>

当我选择datepicker并单击搜索按钮时，获取datepicker的值

并不成功

我尝试使用console.log，但结果为空

有没有人可以帮助我？