商品リストを価格順に並べよう

次のような商品データの配列があります：

const products = [
  { name: "りんご", price: 120 },
  { name: "バナナ", price: 80 },
  { name: "ぶどう", price: 200 },
];

この配列を 価格の安い順（昇順） に並べ替えて表示してください。
ただし、元の配列（products）は変更せず、新しい配列を作って並び替えるようにしましょう。
結果はconsole.log()ではなく、Vueのtemplate内でリスト表示してください。

表示例

• バナナ： 80円
• りんご： 120円
• ぶどう： 200円

ヒント

const sortedProducts = products.toSorted((a, b) => a.price - b.price);

チャレンジ課題

「昇順／降順」ボタンを用意し、クリックで並び順を変更できるようにしてください。