En la plantilla, endDate actualiza como se esperaba. Pero al llamar al método filtersChangerd usando el atributo @selected , el valor actualizado no es el nuevo valor sino el establecido previamente.
<template> <div> <datepicker placeholder="Select end date" v-model="endDate" @selected="filtersChanged"/> <p>endDate Filter: {{ endDate }}</p> </div> </template> <script> import {bus} from "./../../main" import Datepicker from 'vuejs-datepicker'; export default { data () { return { endDate: new Date('December 1, 2022 03:24:00') } }, methods: { filtersChanged() { console.log("Filter endDate", this.endDate) bus.$emit('filtersChanged', { placeFilter: d => d.place === this.selectedPlaceFilter, startDate: d => d.time >= this.startDate, endDate: d => d.time <= this.endDate, }) }, calculateStartDate() { var myDate = new Date(); var newDate = new Date(myDate.getTime() - (60*60*24*7*1000)); return newDate } }, components: { Datepicker } } </script>Sí, eso se debe a que el evento 'seleccionado' se activa antes de la función 'nextTick' de Vue que establece la variable v-model. Así que llámalo manualmente en tu función.
filtersChanged() { this.$nextTick(() => { console.log("Filter endDate", this.endDate) bus.$emit('filtersChanged', { placeFilter: d => d.place === this.selectedPlaceFilter, startDate: d => d.time >= this.startDate, endDate: d => d.time <= this.endDate, }); } }Referencia
https://codesandbox.io/s/vuejs-datepicker-selected-event-v9ikz?file=/components/Demo.vue:611-628