Fix: Calendar view not updating when selectedDate changes - vue-cal v5 sync issue

[GerardoIbarra]

Problem

When changing the date in the DatePicker, the selectedDate updates in the store but the vue-cal calendar view doesn't automatically switch to show the week containing the new date.

Current Implementation

• Using v-model:selected-date="selectedDate" as per vue-cal v4 documentation
• DatePicker updates selectedDate in the store
• Store fetches events for new date
• But calendar view remains on previous week

Expected Behavior

According to vue-cal v5 docs (@https://antoniandre.github.io/vue-cal/examples/dom-events#ex--sync-two-calendars), using v-model:selected-date should automatically sync the calendar view.

Steps to Reproduce

1. Select a date in DatePicker
2. Observe that selectedDate changes in store
3. Calendar view doesn't update to show the new week

##Code Example:
Store:

const selectedDate = ref(new Date());

watch(selectedDate, (newDate) => {
  if (newDate) {
    fetchResourceSchedule(newDate.toISOString().slice(0, 10));
  }
});

Componenet:

<vue-cal
  ref="vuecalRef"
  v-model:view="view"
  v-model:selected-date="selectedDate"
  :events="events"
  default-view="week"
  @view-change="handleViewChange"
>

Component two :

<DatePicker
  v-model="selectedDate"
  @update:model-value="handleDateChange"
/>

##Current vs Expected Behavior
Current: selectedDate changes, events are fetched, but calendar view doesn't move
Expected: selectedDate changes, calendar automatically moves to show the week containing that date

Environment

• vue-cal v5.0.0
• Vue 3 Composition API
• Pinia store

[GerardoIbarra]

Documentation inconsistency: date-picker example does not match actual usage

I noticed that the documentation example for syncing vue-cal with the date-picker is inconsistent with the actual working code.

📄 Documentation shows:
https://antoniandre.github.io/vue-cal/examples/dom-events

vue-cal(
  date-picker
  :views-bar="false"
  v-model:selected-date="exSyncTwoCalendars.selectedDate"
  @update:selected-date="exSyncTwoCalendars.viewDate = $event"
  :view-date="exSyncTwoCalendars.viewDate"
  :dark="store.darkMode")

However, in the code the correct implementation looks like this:

<vue-cal
  v-model:view-date="exSyncTwoCalendars.viewDate"
  v-model:selected-date="exSyncTwoCalendars.selectedDate"
  :views="['day', 'week']"
  :views-bar="false"
  :dark="store.darkMode"
/>
This makes it confusing for new users since the docs suggest a different approach that doesn’t work properly.

[GerardoIbarra]

Additionally, I tested this with a different date picker (PrimeVue DatePicker).
It also works fine — the only change I had to make was to bind the same v-model values used in vue-cal:

<DatePicker
  v-model="exSyncTwoCalendars.selectedDate"
  @update:modelValue="exSyncTwoCalendars.viewDate = $event"
/>

<vue-cal
  v-model:view-date="exSyncTwoCalendars.viewDate"
  v-model:selected-date="exSyncTwoCalendars.selectedDate"
  ...
/>

So if anyone prefers to use another date picker instead of the built-in one, this approach works without problems.

The only change I needed to make to get everything working (both with `vue-cal`'s built-in date-picker and with PrimeVue's `DatePicker`) was to declare the state like this:

```js
const exSyncTwoCalendars = reactive({
  selectedDate: null,
  viewDate: null,
});