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

AppAuthRequired,
		AppTrackEvent,
		AppTooltip,
	},
})
export default class AppUserFollowWidget extends Vue {
	@Prop(User)
	user!: User;

	@Prop(Boolean)
	overlay?: boolean;

	@Prop(Boolean)
	circle?: boolean;

	@Prop(Boolean)
	block?: boolean;

	@Prop(Boolean)
	sm?: boolean;

	@Prop(Boolean)
	hideCount?: boolean;

	@Prop(String)
	eventLabel?: string;

	@State
	app!: AppStore;

	@Emit('follow')
	emitFollow() {}

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { AppTooltip } from '../../../tooltip/tooltip';

@Component({
	directives: {
		AppTooltip,
	},
})
export default class AppBaseContentComponent extends Vue {
	@Prop(Boolean)
	isEditing!: boolean;

	@Prop(Boolean)
	showEdit!: boolean;

	@Prop(Boolean)
	isDisabled!: boolean;

	onRemovedClicked() {
		if (!this.isDisabled) {
			this.$emit('removed');
		}
	}

	onEditClicked() {
		if (!this.isDisabled) {
			this.$emit('edit');
		}
	}

image: File | null;
	_progress: ProgressEvent | null;
}

@Component({
	components: {
		AppJolticon,
		AppFormControlUpload,
	},
	directives: {
		AppTooltip,
	},
})
export default class AppFormControlMarkdownMediaItems extends BaseForm
	implements FormOnInit, FormOnLoad, FormOnSubmit {
	@Prop(String) type!: string;
	@Prop(Number) parentId!: number;
	@Prop(Boolean) disabled?: boolean;

	resetOnSubmit = true;
	reloadOnSubmit = true;

	$refs!: {
		form: AppForm;
	};

	mediaItems: MediaItem[] = [];
	maxFilesize = 0;
	maxWidth = 0;
	maxHeight = 0;

	get loadUrl() {

import Vue, { CreateElement } from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import AppContentMediaItem from '../../components/media-item/media-item.vue';
import { ContentObject } from '../../content-object';
import { ContentOwner } from '../../content-owner';

@Component({})
export class AppContentViewerMediaItem extends Vue {
	@Prop(ContentObject)
	data!: ContentObject;
	@Prop(Object)
	owner!: ContentOwner;

	render(h: CreateElement) {
		return h(AppContentMediaItem, {
			props: {
				mediaItemId: this.data.attrs.id,
				mediaItemWidth: this.data.attrs.width,
				mediaItemHeight: this.data.attrs.height,
				caption: this.data.attrs.caption,
				align: this.data.attrs.align,
				href: this.data.attrs.href,
				isEditing: false,
				owner: this.owner,
			},

import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop, Watch} from 'vue-property-decorator';

@Component({
  name: 'Input'
})
export default class Input extends Vue {

  @Prop({type: [String, Number]})
  public value: string;
  @Prop(Boolean)
  public disabled: boolean;
  @Prop(String)
  public placeholder: string;
  @Prop(Boolean)
  public readonly: boolean;
  @Prop({type: String})
  public type: string;
  private currentValue: string = this.value || '';
  @Prop({type: String, default: 'left'})
  private textAlign: 'left' | 'right' | 'center';

  @Watch('value')
  public valueChanged(value: string) {
    this.currentValue = value;
  }

  get inputRef(): HTMLInputElement {
    return this.$refs['input'] as HTMLInputElement;
  }

import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import AppJolticon from '../../vue/components/jolticon/jolticon.vue'

@Component({
	components: {
		AppJolticon,
	},
})
export default class AppTimepicker extends Vue {
	@Prop(Date) value!: Date;
	@Prop({ type: Boolean, default: true })
	showMeridian!: boolean;
	@Prop(Array) meridians?: [string, string];
	@Prop(Boolean) readonlyInput!: boolean;

	hours = '';
	minutes = '';
	meridian = '';

	private get _meridians() {
		return this.meridians || [this.$gettext('AM'), this.$gettext('PM')];
	}

	created() {
		if (!this.value) {
			throw new Error('Value must be set');