Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

const orders = ref([
  { id: 1, product: 'Widget', qty: 3, price: 9.99,  status: 'shipped'  },
  { id: 2, product: 'Gadget', qty: 1, price: 49.99, status: 'pending'  },
  { id: 3, product: 'Widget', qty: 2, price: 9.99,  status: 'shipped'  },
  { id: 4, product: 'Doohic', qty: 5, price: 4.99,  status: 'cancelled'},
]);

const filterStatus = ref('shipped');
const sortKey      = ref('product');

// Chained computed chain
const filtered = computed(() =>
  orders.value.filter(o => o.status === filterStatus.value)
);

const sorted = computed(() =>
  [...filtered.value].sort((a, b) =>
    String(a[sortKey.value]).localeCompare(String(b[sortKey.value]))
  )
);

const revenue = computed(() =>
  filtered.value.reduce((sum, o) => sum + o.qty * o.price, 0)
);