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

@Component({
               props: {
                 foo_prop: Number
               },
               data: {
                 foo_data: String
               }
             })
  export default class extends mixins(Fooo) {
    foo = 12

    foo_prop = 23

    @Prop() bar;

    @PropSync('name') syncedName;

    @Model('change') checked

    @Emit()
    addToCount(n) {
      this.count += n
    }

    @Emit('reset')
    resetCount() {
      this.count = 0
    }

    getBar() {
      return 0;
    }

import { required, minValue } from 'vuelidate/lib/validators'

@Component({
  components: {
    codemirror,
    media: () => import('src/panel/components/media.vue'),
    'layout-picker': () => import('./layout-picker.vue'),
    'text-animation': () => import('./text-animation.vue'),
    'animation-in': () => import('./animation-in.vue'),
    'animation-out': () => import('./animation-out.vue'),
    'variant': () => import('./variant.vue'),
    'hold-button': () => import('src/panel/components/holdButton.vue'),
  }
})
export default class AlertsEditHostForm extends Vue {
  @PropSync('alert') readonly data !: AlertHost
  @Prop() readonly index !: number

  customShow: 'html' | 'css' | 'js' = 'html';
  fonts: {text: string; value: string}[] = [];

  @Watch('$v', { deep: true })
  emitValidation() {
    this.$emit('update:isValid', !this.$v.$error)
  }

  @Watch('data.variantAmount')
  triggerInput() {
    this.$v.$touch();
  }

  @Validations()

import { required, minValue } from 'vuelidate/lib/validators'

@Component({
  components: {
    codemirror,
    media: () => import('src/panel/components/media.vue'),
    'layout-picker': () => import('./layout-picker.vue'),
    'text-animation': () => import('./text-animation.vue'),
    'animation-in': () => import('./animation-in.vue'),
    'animation-out': () => import('./animation-out.vue'),
    'variant': () => import('./variant.vue'),
    'hold-button': () => import('src/panel/components/holdButton.vue'),
  }
})
export default class AlertsEditFollowForm extends Vue {
  @PropSync('alert') readonly data !: AlertResub
  @Prop() readonly index !: number

  customShow: 'html' | 'css' | 'js' = 'html';
  fonts: {text: string; value: string}[] = [];

  @Watch('$v', { deep: true })
  emitValidation() {
    this.$emit('update:isValid', !this.$v.$error)
  }

  @Validations()
  validations = {
    data: {
      messageTemplate: {required},
      variantAmount: {required, minValue: minValue(0)},
    }

import { required, minValue } from 'vuelidate/lib/validators'

@Component({
  components: {
    codemirror,
    media: () => import('src/panel/components/media.vue'),
    'layout-picker': () => import('./layout-picker.vue'),
    'text-animation': () => import('./text-animation.vue'),
    'animation-in': () => import('./animation-in.vue'),
    'animation-out': () => import('./animation-out.vue'),
    'variant': () => import('./variant.vue'),
    'hold-button': () => import('../../../../components/holdButton.vue'),
  }
})
export default class AlertsEditFollowForm extends Vue {
  @PropSync('alert') data !: CommonSettings
  @Prop() readonly index !: number

  customShow: 'html' | 'css' | 'js' = 'html';
  fonts: {text: string; value: string}[] = [];

  @Watch('$v', { deep: true })
  emitValidation() {
    this.$emit('update:isValid', !this.$v.$error)
  }

  @Validations()
  validations = {
    data: {
      variantAmount: {required, minValue: minValue(0)},
      messageTemplate: {required},
    }

@Component({
  components: {
    codemirror,
    media: () => import('src/panel/components/media.vue'),
    'layout-picker': () => import('./layout-picker.vue'),
    'text-animation': () => import('./text-animation.vue'),
    'animation-in': () => import('./animation-in.vue'),
    'animation-out': () => import('./animation-out.vue'),
    'variant': () => import('./variant.vue'),
    'tts': () => import('./tts.vue'),
    'hold-button': () => import('src/panel/components/holdButton.vue'),
  }
})
export default class AlertsEditCheersForm extends Vue {
  @PropSync('alert') readonly data !: AlertCheer
  @Prop() readonly index !: number

  customShow: 'html' | 'css' | 'js' = 'html';
  fonts: {text: string; value: string}[] = [];

  @Watch('$v', { deep: true })
  emitValidation() {
    this.$emit('update:isValid', !this.$v.$error)
  }

  @Validations()
  validations = {
    data: {
      variantAmount: {required, minValue: minValue(0)},
      messageTemplate: {required},
      message: {

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

@Component
export default class TheInputManager extends Vue {
	@PropSync("input", { required: true }) private syncedInput!: string;
	@Prop({ default: true }) private readonly isInputDisabled!: boolean;

	focusInput(): void {
		(this.$refs.input as HTMLElement).focus();
	}
}