我目前正在练习Vue.js，我遇到了一个关于Vue.js中数组排序的问题。排序（a-b）应该执行升序，即最小字母/值优先，但数组仍然相同。秩序没有改变。我在计算属性中有一个函数，但它不起作用。我被困在这里好几个小时了。下面是我的代码

<template>
  <div>
    <Navbar/>
    <div class="container p-4">
      <h1>{{ title }}</h1><br />
      <br>
      <Button/>
      <Table :people="sortedPeople"/>
    </div>
    <Modal @submit="submitPerson" />
  </div>
</template>
<script>
  import Navbar from './components/Navbar.vue'
  import Button from './components/Button'
  import Table from './components/Table.vue'
  import Modal from './components/Modal.vue'

  export default {
    name: 'App',
    data(){
      return {
        title: 'People',
        name:'Rename This',
        people: [
          {
            fname: 'Ab',
            lname: 'Zigzag'
          },
          {
            fname: 'Al',
            lname: 'Alabasta'
          }
        ],
      }
    },
    components: { Button, Navbar, Table, Modal },
    computed:{
      sortedPeople(){
        return this.people.sort((a, b) => a.lname - b.lname)
      }
    },
    methods: {
      submitPerson(person) {
        if(person.first_name && person.last_name) {
          this.people.push({ fname: person.first_name, lname: person.last_name })
        }
      }
    }
  }
</script>

这是我的表组件，

<template>
    <table class="table table-sm table-responsive table-hover">
        <thead>
            <tr>
                <th>Number</th>
                <th>Names</th>
                <th>Score</th>
            </tr>
        </thead>
        <tbody v-for="(person, i) in people">
            <tr>
                <td>{{  i+=1 }}</td>
                <td>{{ person.fname+" "+person.lname }}</td>
                <td>{{ Math.floor(Math.random() * 100) }}/100</td>
            </tr>
        </tbody>
    </table>
</template>
<script>
    export default {
        name: "Table",
        props: { people: Array },
    }
</script>

如何正确使用计算财产？先谢了。