How to use the @vue/composition-api.computed function in @vue/composition-api

const storeWithState: Store = {
    id,
    // it is replaced below by a getter
    state: state.value,

    patch,
    subscribe,
    reset,
  }

  // @ts-ignore we have to build it
  const computedGetters: StoreGetters = {}
  for (const getterName in getters) {
    const method = getters[getterName]
    // @ts-ignore
    computedGetters[getterName] = computed>(() =>
      getters[getterName](state.value)
    )
  }

  const store = {
    ...storeWithState,
    ...computedGetters,
  }

  // make state access invisible
  Object.defineProperty(store, 'state', {
    get: () => state.value,
    set: (newState: S) => {
      isListening = false
      state.value = newState
      isListening = true

return `${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y}`;
    });

    const scaled = computed(() => {
      return scale(props.value, [props.min, props.max], [0, 1]);
    });

    const position = computed(() => {
      return props.height - (props.height * scaled.value);
    });

    const rightHeight = computed(() => {
      return props.right * props.height;
    });

    const leftHeight = computed(() => {
      return props.left * props.height;
    });

    const svg = ref(null);
    function move(e: MouseEvent) {
      if (!svg.value) {
        return;
      }
      let volume = svg.value.getBoundingClientRect().top + props.height - e.clientY;
      volume /= props.height;
      volume = Math.max(Math.min(volume, 1), 0);
      volume = scale(volume, [0, 1], [props.min, props.max]);
      context.emit('input', volume);
      update();
    }

activate() {
    const openedFile = dawg.project.openedFile;
    const projectName = computed(() => {
      return openedFile.value === null ? '' : path.basename(openedFile.value).split('.')[0];
    });

    const component = Vue.extend({
      template: `
        <div class="text-default text-sm">
          {{ projectName.value }}
        </div>
      `,
      data: () =&gt; ({
        projectName,
      }),
    });

    dawg.ui.statusBar.push({
      component,

setup(props, context) {
    const icon = computed(() => {
      const slot = context.slots.default();
      if (!slot || !slot[0]) {
        return '';
      }

      const text = slot[0].text || '';
      return text.trim();
    });

    const showTooltip = computed(() => {
      return !!props.tooltip;
    });

    const style = computed(() => {
      return { color: props.color };
    });

    return {
      style,
      showTooltip,
      icon,
    };
  },
});

const usePixelIntensityDisplay = (props: Props, imageLoaderRef: Ref) => {
  const pixelIntensityTooltipRef = templateRef('pixelIntensityTooltip')
  const cursorPixelPos = ref<[number, number] | null>(null)
  const zoomX = computed(() => props.zoom)
  const zoomY = computed(() => props.zoom / props.pixelAspectRatio)
  const cursorOverPixelIntensity = computed(() => {
    if (props.ionImage != null && cursorPixelPos.value != null) {
      const [x, y] = cursorPixelPos.value
      const { width, height, mask, intensityValues } = props.ionImage
      if (x >= 0 && x < width
        && y >= 0 && y < height
        && mask[y * width + x] !== 0) {
        return intensityValues[y * width + x]
      }
    }
    return null
  })
  const pixelIntensityStyle = computed(() => {
    if (props.showPixelIntensity
      && props.ionImage != null
      && cursorPixelPos.value != null
      && cursorOverPixelIntensity.value != null) {

return '0 0 ' + steps.value + ' ' + props.height;
    });

    const h2 = computed(() => {
      return props.height / 2;
    });

    const steps = computed(() => {
      return props.width * 100;
    });

    const data0 = computed(() => {
      return props.buffer.getChannelData(0);
    });

    const data1 = computed(() => {
      return props.buffer.numberOfChannels > 1 ? props.buffer.getChannelData(1) : data0.value;
    });

    const dataLen = computed(() => {
      return data0.value.length;
    });

    const duration = computed(() => {
      return props.buffer.duration - props.offset;
    });

    const step = computed(() => {
      return duration.value / props.buffer.duration * dataLen.value / steps.value;
    });

    const ind = computed(() => {

export function useArrayPagination, TR>(
  array: RefTyped,
  options?: Partial>
): ArrayPaginationResult {
  const arrayRef = wrap(array);

  const pagination = usePagination({
    ...{
      currentPage: 1,
      pageSize: 10,
    },
    ...options,
    total: computed(() => arrayRef.value.length)
  });

  const result = computed(() => {
    const array = arrayRef.value;
    if (!Array.isArray(array)) return [];
    return array.slice(
      pagination.offset.value,
      pagination.offset.value + pagination.pageSize.value
    );
  }) as Readonly>;

  return {
    ...pagination,
    result
  };
}

export function usePreferredColorScheme(): Ref<'dark' | 'light' | 'no-preference'> {
  const queries = {
    light: '(prefers-color-scheme: light)',
    dark: '(prefers-color-scheme: dark)',
    'no-preference': '(prefers-color-scheme: no-preference)'
  };

  const isDark = useMedia(queries.dark);
  const isLight = useMedia(queries.light);

  const theme = computed(() => {
    if (isDark.value) {
      return 'dark';
    }

    if (isLight.value) {
      return 'light';
    }

    return 'no-preference';
  });

  return theme;
}

setup ({ user }) {
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)
    const message = reactive('This is a message')

    return {
      fullName,
      message
    }
  }
})

if (isJson) {
            const pJson = response
                .json()
                .then(x => (json.value = x))
                .catch(x => {
                json.value = null;
                jsonError.value = x;
            });
            if (parseImmediate) {
                await pJson;
            }
        }
        return response;
    });
    const status = computed(() => (use.result.value && use.result.value.status) || null);
    const statusText = computed(() => (use.result.value && use.result.value.statusText) || null);
    return {
        ...use,
        json,
        jsonError,
        status,
        statusText
    };
}