How to use the vue-class-component.mixins function in vue-class-component

import InputRadio from '../../vue/component/InputRadio.vue'

import modalMixin from './modal-mixin'
import Component, { mixins } from 'vue-class-component'

const { remote } = window.node.electron
const getPath = window.preload.getPath
const { scoreDir, liveDir } = getPath
const url = window.node.url

@Component({
  components: {
    InputRadio
  }
})
export default class extends mixins(modalMixin) {
  difficulty: string = '4'
  live: any = {}
  difficulties: { [key: string]: string } = {}

  async start () {
    this.playSe(this.enterSe)
    const res = await window.preload.getScore(
      scoreDir(this.live.score), // scoreFile)
      this.difficulty, // difficulty
      this.live.bpm, // bpm
      liveDir(this.live.fileName) // audioFile
    )
    if (!res) return

    this.event.$emit('gameStart')
    this.event.$emit('pauseBgm')

import * as Vts from 'vue-property-decorator'
import { mixins as Mixins } from 'vue-class-component'
import Vue from 'vue'
import Symbol from './symbol'
import VMixin from '../../mixins/v.mixin'
import * as _ from '../../../common/lodash'
import * as core from '../../../common/core'
import * as rkeys from '../../../common/rkeys'
import * as http from '../../../common/http'
import * as utils from '../../adapters/utils'
import socket from '../../adapters/socket'



@Vts.Component
export default class extends Mixins(VMixin) {
	$parent: Symbol
	symbol = this.$parent.symbol
	all = this.$parent.all

	deals = [] as Quotes.Deal[]

	created() {
		// this.syncdeals()
	}

	beforeDestroy() {
		socket.offListener(this.ondeal, this)
		this.deals.splice(0)
	}

	syncdeals() {

import { Button } from '../Button';
import { Component, Event, Prop } from '@/core';

interface Props {
    uid?: string;
    value?: string | null;
    placeholder?: string;
    ariaLabel?: string;
    popoverVisible?: boolean;
    compact?: boolean;
}

@Component('SearchInput')
@Event('search', 'Triggered when the search button is clicked or enter is pressed from the keyboard.')
@Event('autoComplete', 'Triggered when the value in the SearchInput is changed. \n NOTE: This event will get triggered only if there are children components in the suggestion.')
export class SearchInput extends mixins(UidMixin) {
    @Prop('Value set in the Search Input', { default: '', type: String })
    public value!: string;

    @Prop('Placeholder in case the SearchInput is empty', { type: String, default: '' })
    public placeholder!: string;

    @Prop('Aria Label', { type: String, default: 'Search Input' })
    public ariaLabel!: string;

    @Prop('whether search input is compact', { type: Boolean, default: false })
    public compact!: boolean;

    public $tsxProps!: Readonly<{}> & Readonly;
    private searchValue: string = this.value;

    @Watch('value')

minDate?: Date;
  disabledDate?: (date: Date) => boolean;
  blockedDate?: (date: Date) => boolean;
  hasPrevious?: (range: {min: Date, max: Date}) => boolean;
  hasNext?: (range: {min: Date, max: Date}) => boolean;
}

const dateWithYearsFromNow = (numberOfYears: number) => {
  const date = new Date(Date.now());
  date.setFullYear(date.getFullYear() + numberOfYears);
  return date;
};

type ValidationRequest = { min: Date, max: Date };

const CalendarBase = mixins(PresentDateMixin, DisplayedDateMixin, DateSelectionMixin);
@Component('Calendar')
@Mixins(PresentDateMixin, DisplayedDateMixin, DateSelectionMixin)
export class Calendar extends CalendarBase {
  public $tsxProps!: ComponentProps;

  @Prop('whether header is shown', { type: Boolean, default: true })
  public headerVisible!: boolean;

  @Prop('maximum date', {  readableDefault: 'now + 10 years', type: Date, default: () => dateWithYearsFromNow(10)})
  public maxDate!: Date;

  @Prop('minimum date', { readableDefault: 'now - 10 years', type: Date, default: () => dateWithYearsFromNow(-10)})
  public minDate!: Date;

  @Prop(
    'Called with a date to be displayed by the calendar. Return false to disable the date.',