formatter issue because of class based component

[BennaceurHichem]

I have this date picker component where I'm using class-based component using extends Vue, the majority of props are passed correctly and the date picker is rendered correctly, but the problem is that passing the formatted is not possible because I'm using extends Vue instead of export const defineComponent({}) where : defineComponent is imported from'@nuxtjs/composition-api'

this is the source code of the component:

<template>
  <client-only>
    <litepie-datepicker
      :as-single="asSingle"
      :overlay="overlayDatepicker"
      :disable-date="disableDate"
      :shortcuts="dateShortcuts"
      :disable-in-range="disableInRange"
      :options="datepickerOptions"
      :i18n="i18n"
      :auto-apply="autoApply"
      :trigger="triggerDatepicker"
      v-model="context.model"
    />
  </client-only>
</template>
<script lang="ts">
import { ssrRef, watch } from '@nuxtjs/composition-api';
import LitepieDatepicker from 'vue2-litepie-datepicker';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
  name: 'datepicker',
  components: {
    LitepieDatepicker,
  },
})
export default class Datepicker extends Vue {
  @Prop({
    type: Object,
    required: true,
  })
  private context!: any;
  private asSingle: Boolean = false;
  private overlayDatepicker: Boolean = false;
  private dateShortcuts: Boolean = false;
  private disableInRange: Boolean = false;
  private triggerDatepicker = '';
  private autoApply: Boolean = false;
  private i18n = '';
  private disableDate = '';
  private slot = null;
  private datepickerOptions = null;
  setup(props) {
    const myRef = ssrRef(null);
    const dateValue = ssrRef([]);
    const formatter = ssrRef({
      date: 'DD MMM YYYY',
      month: 'MMM',
    });
    watch(dateValue, (oldValue, newValue) => {
      props.context.model = newValue;
    });
    return {
      myRef,
      dateValue,
      formatter,
    };
  }

  mounted() {
    this.asSingle = this.context?.attributes['as-single'];
    this.overlayDatepicker = this.context?.attributes['overlay-datepicker'];
    this.disableDate = this.context?.attributes['disable-date'];
    this.dateShortcuts = this.context?.attributes['date-shortcuts'];
    this.disableInRange = this.context?.attributes['disable-in-range'];
    this.triggerDatepicker = this.context?.attributes['trigger-datepicker'];
    this.datepickerOptions = this.context?.attributes['datepicker-options'];
    this.slot = this.context?.attributes['v-slot-datepicker'];
    this.i18n = this.context?.attributes['i18n-datepicker'];
    this.autoApply = this.context?.attributes['auto-apply'];
  }
}
</script>

<style lang="scss">
*[style*='display: none'] {
  display: none !important;
}

.focus\:ring:focus {
  @apply ring-2 focus:ring-primary-600;
}

.border-litepie-secondary-300 {
  @apply border-solid border border-gray-300 focus:ring-gray-300 focus:border-primary-300;
}

.border-litepie-secondary-300:hover {
  @apply ring-1 hover:bg-gray-200 ring-gray-300;
}
#litepie {
  @apply my-2;
}

.bg-litepie-primary-500 {
  @apply bg-primary-500;
}
.text-litepie-primary-600 {
  @apply text-primary-600;
}
.bg-litepie-secondary-100 {
  @apply bg-primary-100;
}
.text-litepie-secondary-700 {
  @apply text-gray-700;
}

.placeholder-litepie-secondary-400 {
  @apply placeholder-gray-300;
}

.text-litepie-secondary-400 {
  @apply text-gray-400;
}
</style>

the issue is that the formatter is not detected from setup() function in the template, How can I make this class-based component a component based on defineComponent({}) to pass correctly the new format of dates?

[BennaceurHichem]

it was solved by moving the setup() method into @Component({}), and it looks now like this :

<script lang="ts">
import { ssrRef, watch } from '@nuxtjs/composition-api';
import LitepieDatepicker from 'vue2-litepie-datepicker';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
  setup(props) {
    const myRef = ssrRef(null);
    const dateValue = ssrRef([]);
    const formatter = ssrRef({
      date: 'DD/MM/YY',
    });
    watch(dateValue, (oldValue, newValue) => {
      //props.context.model = newValue;
    });
    return {
      myRef,
      dateValue,
      formatter,
    };
  },

  name: 'datepicker',
  components: {
    LitepieDatepicker,
  },
})

export default class Datepicker extends Vue {
....