How to use the vue.ref function in vue

setup(props: Record, ctx: SetupContext): Record {
        const ui = useUI();

        const active = ref(false);
        const content = ref(null);
        const el = ref(null);
        const hasDropdown = ref(false);
        const hasLabel = ref(false);
        const inDropdown = ref(false);

        const shortcut = computed(() => el.value?.dataset.vShortcut);
        const shortcutsEnabled = computed(() => ui.state.shortcuts.enabled);
        const tag = computed(() => (props.to ? "router-link" : "a"));

        const focus = (): void => {
            content.value?.focus();
        };

        const onClick = (ev: MouseEvent): void => {
            if (inDropdown.value) {
                // Ensure dropdown parent button is focused out (i.e. close
                // dropdown).
                (ev.target as HTMLElement)

onBulkRejected,
            onFetchRejected,
            prevRoute,
            routeGuarded,
            watchGuard,
            unwatchGuard,
        } = common;

        const dashboard = ref(null);
        const dashboardRefs = ref>({});
        const data = ref>({});
        //     const dynamicData = ref>>({});
        const form = ref(null);
        const invalid = ref(false);
        const linked = ref(null);
        const saving = ref(false);
        const templates = ref>([]);
        const variables = ref>([]);

        //     const dynamicOptions = computed(
        //         (): Record> => {
        //             return Object.keys(dynamicData.value).reduce(
        //                 (out: Record>, name: string) => {
        //                     out[name] = dynamicData.value[name].map(value => ({label: value, value}));
        //                     return out;
        //                 },
        //                 {},
        //             );
        //         },
        //     );

        //     const dynamicVariables = computed(

setup(props: Record): Record {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore();
        const ui = useUI();

        const {erred, loading, modifiers, onFetchRejected} = common;

        let refreshInterval: number | null = null;
        let refreshSuspended = false;

        const countdown = ref(null);
        const dashboard = ref(null);
        const dashboardRefs = ref>({});
        const dynamicData = ref>>({});
        const grid = ref(null);
        const highlightIndex = ref(null);
        const options = ref(cloneDeep(defaultOptions));
        const timeRangeSynced = ref(true);

        const absoluteRange = computed((): boolean => {
            return parseDate(options.value.timeRange.from).isValid && parseDate(options.value.timeRange.to).isValid;
        });

        const autoPropagate = computed({
            get: (): boolean => {
                return store.state.autoPropagate;
            },
            set: (value: boolean): void => {
                store.commit("autoPropagate", value);
            },

modifiers,
            onFetchRejected,
            prevRoute,
            routeGuarded,
            watchGuard,
            unwatchGuard,
        } = common;

        const chart = ref(null);
        const data = ref>({});
        const dynamicData = ref>>({});
        const form = ref(null);
        const invalid = ref(false);
        const linked = ref(null);
        const saving = ref(false);
        const templates = ref>([]);
        const variables = ref>([]);

        const colors = computed(
            (): Array =>
                chart.value?.series?.map(
                    (series, index) => series.options?.color || boulaColors[index % boulaColors.length],
                ) ?? [],
        );

        const dynamicOptions = computed(
            (): Record> => {
                return Object.keys(dynamicData.value).reduce(
                    (out: Record>, name: string) => {
                        out[name] = dynamicData.value[name].map(value => ({label: value, value}));
                        return out;
                    },

setup(props: Record, ctx: SetupContext): Record {
        const {modifiers} = common;

        let columnWidth = 0;
        let domRect: DOMRect | null = null;
        let gridGap = 0;
        let position: Position | null = null;
        let resize: ResizeObserver | null = null;

        const container = ref(null);
        const dragging = ref(null);
        const el = ref(null);
        const hovering = ref(false);
        const placeholder = ref(null);
        const resizing = ref(null);
        const shrinking = ref(false);

        const matrix = computed(
            (): Array> => {
                const out: Array> = Array.from({length: props.layout.rows}, () =>
                    Array(props.layout.columns).fill(null),
                );

                props.value.forEach((item: GridItem, index: number) => {
                    const layout: GridItemLayout = item.layout;

const store = useStore();
        const ui = useUI();

        const {
            applyRouteParams,
            beforeRoute,
            erred,
            loading,
            modifiers,
            onFetchRejected,
            routeGuarded,
            watchGuard,
            unwatchGuard,
        } = common;

        const form = ref(null);
        const invalid = ref(false);
        const provider = ref(null);
        const saving = ref(false);
        const support = shallowRef(null);
        const supportFailed = ref(false);
        const testing = ref(false);

        const edit = computed(() => router.currentRoute.value.params.id !== "new");

        const addFilter = async (): Promise => {
            if (provider.value === null) {
                throw Error("cannot get provider");
            }

            const rule = await ui.modal("provider-filter", {
                edit: false,

setup(props: Record, ctx: SetupContext): Record {
        const active = ref(0);
        const dropdown = ref(null);
        const el = ref(null);
        const filter = ref("");
        const focused = ref(false);
        const input = ref(null);
        const invalid = ref(false);
        const opened = ref(false);
        const openTop = ref(false);
        const select = ref(null);
        const selected = ref(-1);

        const currentOptions = computed>(() =>
            filter.value
                ? props.options.filter((option: SelectOption) => option.label.toLowerCase().includes(filter.value))
                : props.options,
        );

        const iconValue = computed(
            (): string | null =>
                (props.value !== undefined && selected.value !== -1
                    ? props.options?.[selected.value].icon
                    : props.icon) ?? null,
        );

setup(props: Record, ctx: SetupContext): Record {
        const hasLabel = ref(false);
        const input = ref(null);

        const icon = computed(() => {
            if (props.type === "toggle") {
                return props.value ? "toggle-on" : "toggle-off";
            } else {
                return props.value ? "check" : "";
            }
        });

        const toggle = (): void => {
            if (input.value) {
                input.value.checked = !input.value.checked;
                update();
            }
        };

setup(): Record {
        const i18n = useI18n();

        const edit = ref(false);
        const marker = ref

setup(props: Record): Record {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore();
        const ui = useUI();

        const {erred, loading, onBulkRejected, onFetchRejected} = common;

        const filter = ref("");
        const objects = ref>([]);
        const options = ref(Object.assign({}, defaultOptions));
        const selection = ref>([]);
        const table = ref(null);

        const total = ref(0);

        const selectionEnabled = computed(() => {
            return props.type === "providers" ? (selection.value as Array).map(obj => obj.enabled) : [];
        });

        const tabs = computed(
            (): Array => [
                {label: i18n.t(`labels.${props.type}._`, 2), value: "plain"},
                {label: i18n.t("labels.templates._", 2), value: "template"},
            ],
        );