Сделала BaseCalendar

src/components/base/Calendar/BaseCalendar.vue

@@ -3,7 +3,7 @@
     component(
       v-bind:is="currentForm?.component",
       v-model:internal-date="internalDate",
-      v-model:external-date="value",
+      v-model:external-date="externalValue",
       :range="range",
       :start-year="startYear",
       :end-year="endYear",
@@ -19,7 +19,7 @@
         label="Отменить",
         size="14px",
         padding="10px 12px",
-        @click="currentForm?.cancelFunction"
+        @click="cancelChanges"
       )
       q-btn(
         color="primary",
@@ -56,10 +56,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    // cancel: {
-    //   type: Function,
-    //   default: () => {},
-    // },
   },
   data() {
     return {
@@ -69,23 +65,20 @@ export default {
         {
           component: "CalendarDates",
           saveBtnLabel: "Сохранить",
-          cancelFunction: this.cancelExternalChanges,
           saveFunction: this.saveExternalChanges,
         },
         {
           component: "CalendarYears",
           saveBtnLabel: "Применить",
-          cancelFunction: this.cancelInternalChanges,
           saveFunction: this.applyInternalChanges,
         },
         {
           component: "CalendarMonths",
           saveBtnLabel: "Применить",
-          cancelFunction: this.cancelInternalChanges,
           saveFunction: this.applyInternalChanges,
         },
       ],
-      previousValue: null,
+      externalValue: null,
     };
   },
   computed: {
@@ -108,28 +101,29 @@ export default {
     changeForm(form) {
       this.currentForm = this.forms.find((elem) => elem.component === form);
     },
-    cancelExternalChanges() {
-      this.value = this.range
-        ? {
-            from: this.previousValue?.from?.clone(),
-            to: this.previousValue?.to?.clone(),
-          }
-        : this.previousValue;
-    },
-    cancelInternalChanges() {
+    changeDate() {
       if (this.range) {
-        this.value = {
-          from: this.previousValue?.from?.clone(),
-          to: this.previousValue?.to?.clone(),
+        this.internalDate = this.value?.from?.clone();
+        this.externalValue = {
+          from: this.value?.from?.clone(),
+          to: this.value?.to?.clone(),
         };
-        this.internalDate = this.previousValue?.from?.clone();
       } else {
-        this.value = this.previousValue;
-        this.internalDate = this.previousValue;
+        this.internalDate = this.value?.clone();
+        this.externalValue = this.value?.clone();
       }
+    },
+    cancelChanges() {
+      this.changeDate();
       this.changeForm("CalendarDates");
     },
     saveExternalChanges() {
+      if (this.range)
+        this.value = {
+          from: this.externalValue?.from?.clone(),
+          to: this.externalValue?.to?.clone(),
+        };
+      else this.value = this.externalValue?.clone();
       this.save();
     },
     applyInternalChanges() {
@@ -144,18 +138,7 @@ export default {
     },
   },
   mounted() {
-    if (this.value) {
-      if (this.range) {
-        this.internalDate = this.value?.from?.clone();
-        this.previousValue = {
-          from: this.value?.from?.clone(),
-          to: this.value?.to?.clone(),
-        };
-      } else {
-        this.internalDate = this.value?.clone();
-        this.previousValue = this.value?.clone();
-      }
-    }
+    if (this.value) this.changeDate();
     this.currentForm = this.forms[0];
   },
 };

src/components/base/Calendar/CalendarYears.vue

@@ -28,11 +28,6 @@ export default {
     endYear: Number,
     internalMonth: String,
   },
-  data() {
-    return {
-      previousDate: null,
-    };
-  },
   computed: {
     internalValue: {
       get() {
@@ -69,9 +64,14 @@ export default {
     selectYear(year) {
       this.internalValue = this.internalValue.clone().year(year);
     },
+    scrollToCurrentYear() {
+      document
+        .getElementById(parseInt(this.internalValue.format("YYYY"), 10))
+        .scrollIntoView({ block: "center", behavior: "smooth" });
+    },
   },
   mounted() {
-    this.previousDate = this.internalValue.clone();
+    this.scrollToCurrentYear();
   },
 };
 </script>