How to use the vue.computed function in vue

setup(props: Record, ctx: SetupContext): Record {
        let selectionLast: number | null = null;

        const hasHeader = ref(false);

        const selectedAll = computed({
            get: () => props.selection.length === props.value.length,
            set: to => selectAll(to),
        });

        const selectionState = computed(() => {
            const hashes = props.selection.map((value: unknown) => hash(value));

            return props.value.reduce((out: Record, value: unknown, index: number) => {
                out[index] = hashes.includes(hash(value));
                return out;
            }, {});
        });

        const selectAll = (state: boolean): void => {
            ctx.emit("update:selection", state ? props.value : []);
        };

        const select = (index: number, multiple: boolean): void => {
            const state = unref(selectionState);

            if (multiple && selectionLast !== null) {

export default function useTileMetrics(state: ComputedRef) {
  const metrics = computed((): TileMetrics | undefined => {
    if (state.value === undefined) {
      return
    }

    return state.value.metrics
  })

  const unit = computed((): TileValueUnit => {
    if (metrics.value === undefined) {
      return TileValueUnit.Raw
    }

    return metrics.value.unit
  })

  const values = computed((): string[] | undefined => {

},
        );

        const placeholderIcon = computed(() => {
            if (dragging.value !== null) {
                return "hand-pointer";
            } else if (hovering.value) {
                return "plus";
            } else if (shrinking.value) {
                return "times";
            }

            return null;
        });

        const removable = computed(() => {
            return {
                x: Array(props.layout.columns)
                    .fill(null)
                    .map((value, index) => matrix.value.filter(v => v[index] === null).length === props.layout.rows),
                y: Array(props.layout.rows)
                    .fill(null)
                    .map((value, index) => matrix.value[index].filter(v => v === null).length === props.layout.columns),
            };
        });

        const adaptLayoutRows = (value: Array): void => {
            const yDelta = Math.max(...value.map(item => item.layout.y + item.layout.h)) - props.layout.rows;
            if (yDelta > 0) {
                growLayout("rows", yDelta);
            }
        };

},
        );

        const dynamicVariables = computed(
            (): Array => {
                return chart.value?.options?.variables?.filter(variable => variable.dynamic) ?? [];
            },
        );

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

        const link = computed(() => router.currentRoute.value.params.id === "link" || Boolean(chart.value?.link));

        const resolvedChart = computed((): Chart | null => {
            if (linked.value) {
                return renderChart(linked.value, data.value);
            } else if (!link.value) {
                return chart.value;
            }

            return null;
        });

        const seriesAxes = computed((): {left: boolean; right: boolean} => {
            const out = {left: false, right: false};
            chart.value?.series?.forEach(series => (out[series.options?.axis ?? "left"] = true));
            return out;
        });

        const template = computed(() => !link.value && variables.value.length > 0);

{},
                );
            },
        );

        const dynamicVariables = computed(
            (): Array => {
                return chart.value?.options?.variables?.filter(variable => variable.dynamic) ?? [];
            },
        );

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

        const link = computed(() => router.currentRoute.value.params.id === "link" || Boolean(chart.value?.link));

        const resolvedChart = computed((): Chart | null => {
            if (linked.value) {
                return renderChart(linked.value, data.value);
            } else if (!link.value) {
                return chart.value;
            }

            return null;
        });

        const seriesAxes = computed((): {left: boolean; right: boolean} => {
            const out = {left: false, right: false};
            chart.value?.series?.forEach(series => (out[series.options?.axis ?? "left"] = true));
            return out;
        });

setup(): Record {
        const ui = useUI();

        let hideTimeout: number | null = null;

        const active = ref(true);
        const notification = ref(null);
        const timer = ref(null);

        const iconValue = computed((): string | null => {
            if (notification.value?.icon) {
                return notification.value.icon;
            }

            switch (notification.value?.type) {
                case "error":
                    return "exclamation-circle";

                case "success":
                    return "check-circle";

                case "warning":
                    return "exclamation-triangle";
            }

            return null;

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

        const file = ref(null);

        const apiOptions = computed(() => store.state.apiOptions);

        const dump = (): void => {
            location.href = `${apiPrefix}/store`;
        };

        const restore = async (): Promise => {
            const curFile = file.value?.files?.[0];
            if (file.value === null || curFile === undefined) {
                throw Error("cannot get file");
            }

            if (curFile.type !== "application/gzip" && curFile.type !== "application/x-gzip") {
                ui.notify(i18n.t("messages.database.invalidFile"), "error");
                file.value.value = "";
                return;
            }

const {erred, loading, onFetchRejected} = common;

        let intersection: IntersectionObserver | null = null;

        const accordion = ref | null>(null);
        const expandState = ref>({});
        const filter = ref("");
        const labels = ref>([]);
        const matcher = ref([]);
        const metrics = ref>([]);
        const options = ref(Object.assign({}, defaultOptions));
        const page = ref(1);
        const spinner = ref(null);
        const total = ref(0);

        const pages = computed(() => Math.ceil(total.value / limit));

        const clipboardCopy = (value: string): void => {
            navigator.clipboard.writeText(value).then(() => ui.notify(i18n.t("messages.copied"), "success"));
        };

        const expandMetric = (index: number): void => {
            expandState.value[index] = !expandState.value[index];
        };

        const getLabels = (): void => {
            accordion.value = null;
            labels.value = [];

            api.labelValues({
                limit: limit / 2,
                filter: filter.value || undefined,