Discussion on: Trying the composition API in Vue3

[Bennaceur Hichem]

I have a vue 2 component that i couldn't make using defineComponent correctly, I need some help if you don't mind

<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>

how can I use existed props here into defineComponent and make things work worrectly, because I need to pass the formatter to change the datepicker format and without defineComponent it won't works