Vue Js Sort Array Method

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
   
    <body>
      <div id="app">
        <h2>Vue js sort() string Method</h2>
        <button @click="sortByNum">Sort by number </button>
        <button @click="sortByAlpha">Sort By  Alphabetically</button>
        <p></p>
        <table>
          <thead>
            <tr>
              <th>Serial_Num</th>
              <th>Language</th>
              <th>Published</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="object in demoObject">
            <td>{{object.serial_no}}</td>
            <td>{{object.languageName}}</td>
            <td>{{object.published}}</td>
            </tr>
         
          </tbody>
        </table>
       
  
      
    </div>
   <script type="module">
    import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
        demoObject:[
          {
            serial_no:104,
            languageName:'Vue',
            published:'February 2014'
          },
          {
            serial_no:102,
            languageName:'React',
            published:'May 2013'
          },
          {
            serial_no:103,
            languageName:'Angular',
            published:'October 2010'
          },
          {
            serial_no:203,
            languageName:'PHP',
            published:'1995'
          },
        ],
       
        } 
     }, 
     methods:{ 
         sortByNum(){ 
            this.demoObject.sort((a,b) =>a.serial_no - b.serial_no); 
           },
          sortByAlpha(){
            this.demoObject.sort((a,b) => a.languageName < b.languageName ? -1: 1);
          }
        }
    }).mount('#app')
  </script>

</body>
  </head>
</html>