Javascript Jquery datepicker在laravel中Vue.js组件的v-for内部不工作

Jquery日期选择器在我的vue.js组件的v-for循环中显示奇怪的行为。在循环之外，它工作正常，日期选择器正在显示。但是，在我的v-for循环中，它并没有像预期的那样选择日期选择器

这是我的日期选择器的工作代码。（工作案例）

周末

日期选择器在此情况下不工作（非工作情况）

周末

这是我的datepicker的Jquery代码

$(".datepickere").datepicker({
    onSelect: function(dateText) {
        display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
      $(this).change();
    }
}).on("change", function() {
    display("Change event");
});
function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
} 

$（“.datepickere”）.datepicker({
onSelect:函数（日期文本）{
显示（“选定日期：“+dateText+”，当前选定值=“+this.Value”）；
$（this.change（）；
}
}).on（“更改”，函数（）{
显示（“变更事件”）；
});
功能显示（msg）{
$（“”）.html（msg.appendTo（document.body）；
} 

虽然我给出了一个类而不是id，但问题仍然是一样的。出什么事了

<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
    <div class="form-row">
        <div class="col-md-4 mb-3">
            <label for="date" class="col-form-label pt-0">For Week End</label>
            <input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
        </div>
    </div>
</div>

$(".datepickere").datepicker({
    onSelect: function(dateText) {
        display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
      $(this).change();
    }
}).on("change", function() {
    display("Change event");
});
function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
}