date-utils.ts

/**
 * Add the selected number of month to the selected time
 * @param {number} numberOfMonths
 * @param {Date} currentTime
 * @return {Date}
 */
export function addMonths(numberOfMonths: number, currentTime: Date): Date {
  const x = currentTime.getDate();
  currentTime.setMonth(currentTime.getMonth() + numberOfMonths);
  console.log(`Function has been called with : ${currentTime}`);
  if (currentTime.getDate() != x) {
    currentTime.setDate(0);
  }
  return currentTime;
}
/**
 * Subsctract the selected number of months for the selected date
 * @param {number} numberOfMonths
 * @param {Date} currentTime
 * @return {Date}
 */
export function substractMonths(
  numberOfMonths: number,
  currentTime: Date
): Date {
  return addMonths(numberOfMonths * -1, currentTime);
}

DatePicker.vue

<template>
<div class="calendar__pickable">
   <span
      class="calendar__pickable__chevron"
      @click="selectedTime = substractMonths(1, selectedTime)"
      >
      <span>
         <font-awesome-icon icon="chevron-left" />
      </span>
   </span>
   <span class="font-bold py-4 capitalize"
      >{{ formatMonthName(selectedTime) }}
   {{ selectedTime.getFullYear() }}</span
      >
   <span
      class="calendar__pickable__chevron"
      @click="selectedTime = addMonths(1, selectedTime)"
      >
      <span>
         <font-awesome-icon icon="chevron-right" />
      </span>
   </span>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  addMonths,
  buildDaysArray,
  formatMonthName,
  substractMonths
} from "@/utils/date-utils";
import {
  CalendarState,
  CalendarVisibilityState
} from "@/utils/datepicker-state";

export default defineComponent({
  name: "DatePicker",

  setup(props) {
    const calendarVisibilityState = ref(CalendarVisibilityState.Opened);
    const calendarState = ref(CalendarState.SelectQuickActions);
    const daysOfWeek = ref(["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"]);
    const selectedTime = ref(new Date());

    buildDaysArray(selectedTime.value);

    return {
      calendarVisibilityState,
      CalendarVisibilityState,
      CalendarState,
      calendarState,
      daysOfWeek,
      buildDaysArray,
      selectedTime,
      formatMonthName,
      addMonths,
      substractMonths,
      ref
    };
  }
});
</script>

The only thing I try to do is to execute a function that returns a new date, and replace my selectedTime with the return value of the function.