How to use the vue-property-decorator.Mixins function in vue-property-decorator

import { Component, Mixins, Prop } from "vue-property-decorator";

import { BehaviourComponent } from "../../../src";

@Component
export class HoverBehaviour extends Mixins(BehaviourComponent) {
  @Prop({ required: true, type: Object })
  public position!: { y: number };

  @Prop({ type: Number, default: 1 })
  public distance!: number;

  @Prop({ type: Number, default: 1 })
  public speed!: number;

  private m_moveUp = true;
  private m_originalY = 0;

  public created() {
    // access app
    const app = this.app;

import { Component, Mixins, Prop } from "vue-property-decorator";

import { MaterialFactory, MaterialType } from "../core";
import { AssetComponent } from "../mixins";

@Component
export class Material extends Mixins(AssetComponent) {
  @Prop({ required: true, type: String })
  private name!: string;

  @Prop({ required: true, type: Function })
  private factory!: MaterialFactory;

  public created() {
    const material = this.factory(this.app());
    if (this.bundle()) {
      this.bundle()!.registerAsset(this.name, material);
    }
    this.app().assets.materials.set(this.name, material);
  }

  public async destroyed() {
    if (this.bundle()) {

import { Component, Mixins, Prop, Watch } from "vue-property-decorator";

import { ObjectComponent } from "../../mixins";

@Component
export class Position extends Mixins(ObjectComponent) {
  @Prop({
    required: true,
    type: Object
  })
  private value!: { x: number; y: number; z: number };

  @Watch("value", { deep: true })
  private onChange() {
    this.object!.position.set(this.value.x, this.value.y, this.value.z);
  }

  public created() {
    if (!this.object) {
      throw new Error(
        "Position property can only be added as child to an object component"
      );

import {SelectOption} from "@/types/components";

import {resolveOption} from "@/src/helpers/select";
import {CustomMixins} from "@/src/mixins";

import {itemTypes} from "./show.vue";
import {dataFromVariables, parseVariables, renderTemplate} from "../../helpers/template";

const types: Array = [
    {label: "labels.home", value: "dashboards", icon: "home"},
    {label: "labels.basket._", value: "basket", icon: "shopping-basket"},
];

@Component
export default class Sidebar extends Mixins(CustomMixins) {
    public dashboard: Dashboard | null = null;

    public dashboards: Array = [];

    public dashboardRefs: Record = {};

    public loading = true;

    public type = "home";

    public mounted(): void {
        this.$parent.$on("dashboard-loaded", this.onDashboardLoaded);

        if (this.$route.name === "dashboards-home") {
            this.getDashboards();
        }

import * as THREE from "three";
import { Component, Mixins, Prop } from "vue-property-decorator";

import { Entity } from "./Entity";

@Component
export class Axes extends Mixins(Entity) {
  @Prop({ type: String, default: "" })
  private name!: string;

  @Prop({ type: Number, default: 1 })
  private size!: number;

  protected async instantiate() {
    const axes = new THREE.AxesHelper(this.size);
    axes.name = this.name;
    return axes;
  }
}

'currentService',
      'additionalNotes',
      'serviceList'
    ])
  },
  methods: {
    ...mapMutations('office', [
      'setCurrentService',
      'setAdditionalNotes'
    ]),
    ...mapActions('office', [
      'getServiceByOffice'
    ])
  }
})
export default class ServiceSelection extends Mixins(StepperMixin) {
  private readonly serviceList!: Service[]
  private readonly currentOffice!: Office
  private readonly currentService!: Service
  private readonly additionalNotes!: string
  private readonly setCurrentService!: (service: Service) => void
  private readonly setAdditionalNotes!: (notes: string) => void
  private readonly getServiceByOffice!: (officeId: number) => Promise
  private selectedService: Service = null
  private selectedServiceType = typeof this.selectedService
  private additionalOptions = ''
  private maxChars = 255
  private charsLeft = this.maxChars
  private textCharsPrefix = 'Additional information? (Optional - '
  private textCharsSuffix = ' characters left)'
  private textCharsLeft = this.textCharsPrefix + this.charsLeft + this.textCharsSuffix
  private keyPressed = true

import { Component, Mixins, Prop, Watch } from "vue-property-decorator";

import { ObjectComponent } from "../../mixins";

@Component
export class Shadows extends Mixins(ObjectComponent) {
  @Prop({
    default: false,
    type: Boolean
  })
  private receive!: boolean;

  @Prop({
    default: false,
    type: Boolean
  })
  private cast!: boolean;

  @Prop({
    default: false,
    type: Boolean
  })

import { PCFSoftShadowMap, WebGLRenderer } from "three";
import { CreateElement } from "vue";
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";

import { RendererHandle } from "../core";
import { AppComponent } from "../mixins";

@Component
export class Renderer extends Mixins(AppComponent) {
  @Prop({ required: true, type: HTMLCanvasElement })
  public canvas!: HTMLCanvasElement;

  @Prop({ required: true, type: String })
  public scene!: string;

  @Prop({ required: true, type: String })
  public camera!: string;

  @Prop({ default: false, type: Boolean })
  public antialias!: boolean;

  @Prop({ default: false, type: Boolean })
  public shadows!: boolean;

  @Prop({ default: true, type: Boolean })