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

import {Component, Ref, Vue} from 'vue-property-decorator';
    import Header from '@/app/components/Header.vue';
    import jsQR from 'jsqr';

    @Component({
        components: {Header},
    })
    export default class HomeContainer extends Vue {
        public surveyCode = '';
        public isScanEnabled = false;
        public stream: MediaStream | null = null;

        @Ref('preview')
        public video!: HTMLVideoElement;

        @Ref('canvas')
        public canvasElement!: HTMLCanvasElement;

public async scan() {
    this.isScanEnabled = true;
    this.stream = await navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'environment'}});
    this.video.srcObject = this.stream;
    this.video.setAttribute('playsinline', true as any); // required to tell iOS safari we don't want fullscreen
    await this.video.play();
    requestAnimationFrame(this.tick);
}

        private tick() {
            if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
                const ctx = this.canvasElement.getContext('2d');
                if (ctx) {
                    this.canvasElement.height = this.video.videoHeight;

import Emoji from './emoji.vue'

  const length = 512 // max length of message

  @Component({
    name: 'neko-chat',
    components: {
      'neko-markdown': Markdown,
      'neko-context': Content,
      'neko-emoji': Emoji,
    },
  })
  export default class extends Vue {
    @Ref('input') readonly _input!: HTMLTextAreaElement
    @Ref('history') readonly _history!: HTMLElement
    @Ref('context') readonly _context!: any

    emoji = false
    content = ''

    get id() {
      return this.$accessor.user.id
    }

    get muted() {
      return this.$accessor.user.muted
    }

    get history() {
      return this.$accessor.chat.history
    }

@Mutation
    readonly initTrackerNameWithTheSelectedTemplateName!: () => void;

    @Mutation
    readonly initTrackerNameWithTheSelectedProjectTrackerTemplateName!: () => void;

    @Mutation
    readonly cancelCreationFormSubmition!: () => void;

    @Mutation
    readonly reinitTrackerToBeCreatedData!: () => void;

    @State
    readonly selected_xml_file_input!: HTMLInputElement;

    @Ref("tracker_creation_form")
    readonly creation_form!: HTMLFormElement;

    @Watch("has_form_been_submitted", { deep: true })
    submitTheForm(current_value: boolean): void {
        if (current_value === true && this.creation_form.checkValidity()) {
            this.creation_form.submit();
        } else {
            this.cancelCreationFormSubmition();
            this.creation_form.reportValidity();
        }
    }

    mounted(): void {
        if (this.is_created_from_default_template) {
            this.initTrackerNameWithTheSelectedTemplateName();
        } else if (this.is_a_duplication) {

}
})
export default class HistoryComponent extends Vue {
    synced: boolean = true;
    haltUnsync: boolean = false;

    @Prop({default:Color.BLACK})
    initialTurn!: Color;

    @Prop({default:[]})
    moves!: Move[];

    @Prop()
    end?: EndGameInfo;

    @Ref('history-list')
    historyList!: HTMLDivElement;

    private format(move: Move): string {
        if(move.type == "place"){
            return `Played ${PointUtility.Format(move.point)}`;
        } else if(move.type == "pass"){
            return "Passed";
        } else if(move.type == "resign"){
            return "Resigned";
        } else {
            return "";
        }
    }

    private turn(index: number): Color {
        return index%2==0?this.initialTurn:FlipColor(this.initialTurn);

import { DataFormat, GroupedDataFormat, LoadingData, select2, Select2Plugin } from "tlp";
import { TrackerToBeCreatedMandatoryData } from "../../../../store/type";
import { DataForColorPicker } from "../../../../store/type";

@Component
export default class FieldTrackerColor extends Vue {
    @State
    readonly tracker_to_be_created!: TrackerToBeCreatedMandatoryData;

    @State
    readonly default_tracker_color!: string;

    @State
    readonly color_picker_data!: DataForColorPicker[];

    @Ref("color-selector")
    readonly color_selector!: HTMLSelectElement;

    @Watch("tracker_to_be_created", { deep: true })
    updateSelectedColor(
        old_value: TrackerToBeCreatedMandatoryData,
        new_value: TrackerToBeCreatedMandatoryData
    ): void {
        if (old_value.color !== new_value.color) {
            this.selectColor();
        }
    }

    private select2_color: Select2Plugin | null = null;

    mounted() {
        this.select2_color = select2(this.color_selector, {

import Header from '@/app/components/Header.vue';

    @Component({
        components: {Header, QrcodeVue, VueCropper},
    })
    export default class CreateSurveyContainer extends Vue {
        public perspective: string = '';
        public surveyCode: string = '';
        public qrCodeUrl: string = '';
        public isLoading = false;
        public imageFile: File | null = null;
        public imageSource = '';
        public imageSources: string[] = [];
        public isImageProcessing = false;

        @Ref('cropper')
        public cropperElement!: any;

        @Watch('imageFile')
        public fileInput() {
            if (this.imageFile) {
                const file = this.imageFile;
                if (file.type.indexOf('image/') === -1) {
                    alert('Please select an image file');
                    return;
                }
                if (typeof FileReader === 'function') {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        if (event && event.target) {
                            this.imageSource = event.target.result as any;
                            this.cropperElement.replace(event.target.result);

import Emote from './emote.vue'
  import Resolution from './resolution.vue'

  import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'

  @Component({
    name: 'neko-video',
    components: {
      'neko-emote': Emote,
      'neko-resolution': Resolution,
    },
  })
  export default class extends Vue {
    @Ref('component') readonly _component!: HTMLElement
    @Ref('container') readonly _container!: HTMLElement
    @Ref('overlay') readonly _overlay!: HTMLElement
    @Ref('aspect') readonly _aspect!: HTMLElement
    @Ref('player') readonly _player!: HTMLElement
    @Ref('video') readonly _video!: HTMLVideoElement
    @Ref('resolution') readonly _resolution!: any

    private keyboard = GuacamoleKeyboard()
    private observer = new ResizeObserver(this.onResise.bind(this))
    private focused = false
    private fullscreen = false

    get admin() {
      return this.$accessor.user.admin
    }

    get connected() {