Vue组件中如何处理数据的筛选和排序操作

<template>  <div>    <input v-model="filter" placeholder="请输入年龄筛选条件" />    <ul>      <li v-for="student in filteredStudents" :key="student.id">{{ student.name }}，{{ student.age }}岁</li>    </ul>  </div></template><script>export default {  data() {    return {      students: [        { id: 1, name: '张三', age: 18 },        { id: 2, name: '李四', age: 20 },        { id: 3, name: '王五', age: 22 },        { id: 4, name: '赵六', age: 16 },      ],      filter: '',    };  },  computed: {    filteredStudents() {      return this.students.filter((student) => {        return student.age >= 18;      });    },  },};</script>

<template>  <div>    <button @click="sortAsc">按价格从低到高排序</button>    <ul>      <li v-for="product in sortedProducts" :key="product.id">{{ product.name }}，{{ product.price }}元</li>    </ul>  </div></template><script>export default {  data() {    return {      products: [        { id: 1, name: '商品1', price: 100 },        { id: 2, name: '商品2', price: 50 },        { id: 3, name: '商品3', price: 200 },        { id: 4, name: '商品4', price: 80 },      ],    };  },  methods: {    sortAsc() {      this.products.sort((a, b) => {        return a.price - b.price;      });    },  },  computed: {    sortedProducts() {      return this.products;    },  },};</script>