How to use the easy-peasy.computed function in easy-peasy

onLinkClick: Action[0]>;
  onCanvasClick: Action[0]>;
  onDeleteKey: Action[0]>;
  onNodeClick: Action[0]>;
  onNodeSizeChange: Action[0]>;
  onPortPositionChange: Action[0]>;
  onCanvasDrop: Action[0]>;
}

const designerModel: DesignerModel = {
  // state properties
  activeId: -1,
  allCharts: {},
  redraw: false,
  // computed properties/functions
  activeChart: computed(state => state.allCharts[state.activeId]),
  // reducer actions (mutations allowed thx to immer)
  setActiveId: action((state, networkId) => {
    if (!state.allCharts[networkId]) throw new Error(l('notFoundError', { networkId }));
    state.activeId = networkId;
  }),
  setAllCharts: action((state, charts) => {
    state.allCharts = charts;
  }),
  setChart: action((state, { id, chart }) => {
    state.allCharts[id] = chart;
  }),
  removeChart: action((state, id) => {
    delete state.allCharts[id];
    if (state.activeId === id) {
      state.activeId = -1;
    }

>;
  rename: Thunk<
    NetworkModel,
    { id: number; name: string },
    StoreInjections,
    RootModel,
    Promise
  >;
  remove: Thunk>;
}

const networkModel: NetworkModel = {
  // state properties
  networks: [],
  // computed properties/functions
  networkById: computed(state => (id?: string | number) => {
    const networkId = typeof id === 'number' ? id : parseInt(id || '');
    const network = state.networks.find(n => n.id === networkId);
    if (!network) {
      throw new Error(l('networkByIdErr', { networkId }));
    }
    return network;
  }),
  // reducer actions (mutations allowed thx to immer)
  setNetworks: action((state, networks) => {
    state.networks = networks;
  }),
  updateNodePorts: action((state, { id, ports }) => {
    const network = state.networks.find(n => n.id === id) as Network;
    network.nodes.bitcoin
      .filter(n => !!ports[n.name])
      .forEach(n => (n.ports = { ...n.ports, ...ports[n.name] }));

}

const mode: StoreModel = {
  products: {
    products: [{ id: 1, name: 'boots', price: 20 }],
    totalPrice: computed(state =>
      state.products.reduce((total, product) => total + product.price, 0),
    ),
    totalPriceVerbose: computed(
      products => products.reduce((total, product) => total + product.price, 0),
      [state => state.products],
    ),
  },
  baskets: {
    productIds: [1],
    products: computed(
      (productIds, products) =>
        productIds.reduce((acc, id) => {
          const product = products.find(p => p.id === id);
          if (product) {
            acc.push(product);
          }
          return acc;
        }, []),
      [
        state => state.productIds,
        (state, storeState) => storeState.products.products,
      ],
    ),
  },
};

BasketModel,
    Product[],
    ResolvedState2,
    StoreModel
  >;
}

interface StoreModel {
  products: ProductsModel;
  baskets: BasketModel;
}

const mode: StoreModel = {
  products: {
    products: [{ id: 1, name: 'boots', price: 20 }],
    totalPrice: computed(state =>
      state.products.reduce((total, product) => total + product.price, 0),
    ),
    totalPriceVerbose: computed(
      products => products.reduce((total, product) => total + product.price, 0),
      [state => state.products],
    ),
  },
  baskets: {
    productIds: [1],
    products: computed(
      (productIds, products) =>
        productIds.reduce((acc, id) => {
          const product = products.find(p => p.id === id);
          if (product) {
            acc.push(product);
          }

data: {},
    sortBy: 'none',
    name,
    ids: computed(state => Object.keys(state.data).map(id => parseInt(id))),
    fetched: action((state, items) => {
      state.name;
      items.forEach((item, idx) => {
        state.data[idx] = item;
      });
    }),
    fetch: thunk(async (actions, payload) => {
      const data = await endpoint();
      actions.fetched(data);
      actions.nested.save(1);
    }),
    getItemById: computed(state => (id: string) =>
      Object.values(state.data).find(item => item.id === id),
    ),
    nested: {
      save: thunk((actions, payload) => {
        actions.save(payload + 1);
      }),
    },
  };
  return result;
};

StoreModel
  >;
}

interface StoreModel {
  products: ProductsModel;
  baskets: BasketModel;
}

const mode: StoreModel = {
  products: {
    products: [{ id: 1, name: 'boots', price: 20 }],
    totalPrice: computed(state =>
      state.products.reduce((total, product) => total + product.price, 0),
    ),
    totalPriceVerbose: computed(
      products => products.reduce((total, product) => total + product.price, 0),
      [state => state.products],
    ),
  },
  baskets: {
    productIds: [1],
    products: computed(
      (productIds, products) =>
        productIds.reduce((acc, id) => {
          const product = products.find(p => p.id === id);
          if (product) {
            acc.push(product);
          }
          return acc;
        }, []),
      [

const dataModel = (
  name: string,
  endpoint: () => Promise,
): DataModel => {
  const result: DataModel = {
    data: {},
    sortBy: 'none',
    name,
    ids: computed(state => Object.keys(state.data).map(id => parseInt(id))),
    fetched: action((state, items) => {
      state.name;
      items.forEach((item, idx) => {
        state.data[idx] = item;
      });
    }),
    fetch: thunk(async (actions, payload) => {
      const data = await endpoint();
      actions.fetched(data);
      actions.nested.save(1);
    }),
    getItemById: computed(state => (id: string) =>
      Object.values(state.data).find(item => item.id === id),
    ),
    nested: {
      save: thunk((actions, payload) => {