Vue.js not arranging elements numerically?

Question

So I tried getting Vue.js to arrange elements numerically by using "sortBy". Obviously, I failed. I searched the web but got no satisfactory results, so anybody could help me?

HTML (not the whole thing, just the table that Vue.js renders)

<table class="ui celled table">
                <thead>
                    <tr>
                        
                        <th @click="sortBy='name'">Name</th>
                                <th @click="sortBy='cal'">Caliber</th>
                                <th @click="sortBy='r'">Range (max-min)(studs)</th>
                                <th @click="sortBy='dmg'">Damage</th>
                                <th @click="sortBy='cap'">Capacity</th>
                                <th @click="sortBy='rpm'">Rate of Fire</th>
                                <th @click="sortBy='multi'">Damage Multiplier (Head/Torso)</th>
                                <th @click="sortBy='desc'">Description</th>
                                <th @click="sortBy='rank'">Rank Unlock</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="list in lists">
                        
                        <td>{{list.name}}</td>
                                <td>{{list.cal}}</td>
                                <td>{{list.r}}</td>
                                <td>{{list.dmg}}</td>
                                <td>{{list.cap}}</td>
                                <td>{{list.rpm}}</td>
                                <td>{{list.multi}}</td>
                                <td>{{list.desc}}</td>
                                <td>{{list.rank}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="100%">{{sortedlists.length}} guns</th>
                    </tr>
                </tfoot>
            </table>

JS

new Vue({
          el: "#main",
          data: {
            lists: [
                     {
                "name": "M9",
                "cal": "9×19mm",
                "dmg": "35-10",
                "cap": "15+1 / 105",
                "rpm": "780",
                       "multi":"1.50/1.10",
                "desc": "A 9mm Italian pistol. One of the first 'wonder nines'. High capacity with deep reserves, light recoil, and high velocity. ",
              "r": "40-80",
                 "rank": "0"
                 
              },
              {
                "name": "GLOCK 17 (G17)",
                "cal": "9×19mm",
                "dmg": "34-10",
                "cap": "17+1/102",
                "rpm": "780",
                "r":"40-90",
                "multi":"1.50/1.10",
                "desc": "A 9mm Austrian pistol renowned for its simplicity and ruggedness. Compared to the M9, it has a higher capacity, but less muzzle velocity.",
            "rank": "1"
              },
              {
                "name": "M1911",
                "cal": ".45 ACP",
                "dmg": "48-29",
                "cap": "8+1/56",
                "rpm": "720",
            "r":"55-90",
            "multi":"1.40/1.15",
                "desc": "A classic American pistol brought into the modern age. Very high damage up close, with poor velocity and small magazine size.",
            "rank": "2"
              },
              {
                "name": "DESERT EAGLE (DEAGLE) L5",
                "cal": ".44 MAGNUM",
                "dmg": "56-32",
                "cap": "8+1/40",
                "rpm": "400",
                "r":"50-80",
                "multi":"2.00/  1.30",
                "desc": "A modern version of the iconic Israeli-American pistol. This specific model has been lightened as well as upgraded with dual Picatinny rails and a much-needed muzzle brake. Very high damage with the capacity to instantly kill to the head up close, with rough recoil.",
                "rank": "3"
              },
               {
                "name": "M45A1",
                "cal": ".45 ACP",
                "dmg": "45-28",
                "cap": "10+1/60",
                "rpm": "670",
                 "r":"50-95",
                 "multi":"1.40/1.15",
                "desc": "A modern American pistol with many custom parts. High damage, medium capacity, strong recoil.",
                 "rank": "4"
              },
                
                {
                "name": "FIVE SEVEN",
                "cal": "5.7×28mm",
                "dmg": "29-22",
                "cap": "20+1/100",
                "rpm": "800",
                  "r":"80-120",
                  "multi":"1.40/1.20",
                "desc": "A modern Belgian pistol firing a unique caliber. Poor close-in performance, with great ranged performance, high velocity, large magazine, wall penetration and deep reserves.",
                  "rank": "5"
              },
               {
                "name": "ZIP 22",
                "cal": ".22 LONG RIFLE",
                "dmg": "15-12",
                "cap": "10+1/180",
                "rpm": "1000 SEMI",
                 "r":"30-60",
                 "multi":"2.80/1.00",
                "desc": "A modern American 'pistol' with questionable quality. Abysmal damage, but with deep reserves and a high headshot multiplier. A weapon so bad it killed a million dollar company. 3 shots to the head at all ranges.",
                 "rank": "6"
              },
                        .
                        .
                        .
                        .
                        etc all the way to "rank": "100"
              {
                "name": "MG42**",
                "cal": "7.62 NATO",
                "dmg": "36-20",
                "cap": "50/250",
                      "rpm": "1200 AUTO",
                "multi":"1.40/1.00",
                "desc": "The original, the iconic, the feared... The buzzsaw of the axis powers during the second world war, back to prove it’s worth in the modern warzone. Fires extremely fast and hits even harder, but is slow and inaccurate.",
                "rank": "100"
              },
                
              
            ],
            sortBy: "rank",
            filterByName: "",
            
            counter: 0
          },
          
          computed: {
            sortedlists() {
              return this.lists.filter(
                list => list.name.includes(this.filterByName)
              ).sort(
                (a, b) => a[this.sortBy].localeCompare(b[this.sortBy])
              );
            }
          }
        });

EDIT: I didn't include the whole javascript so I thought I might as well update the questions to make it clearer. So as I said, the `

computed: 

    {
            sortedlists() {
              return this.lists.filter(
                list => list.name.includes(this.filterByName)
              ).sort(
                (a, b) => a[this.sortBy].localeCompare(b[this.sortBy])
              );
            }`

doesn't arrange the elements in numerical order.

etc. all the way to "rank": "100". Vue arranges the elements in a way like 0,1,10,100,11,2,20,21........29,3,30,31,32,33,.....39,4,40,....48,49 etc

You get the idea. It just doesn't seem to arrange the elements like 1,2,3,4,5,6,7,8,9,10,11,12 etc. which I want it to do. Any helpful answers?

Answer 1

You need to sort by rank as a number and not as a string. Alphabetical order is exact that you got: 1,10,100,11,2,20,21 .

const sortedList = lists.splice().sort((x1, x2) => (parseInt(x1.rank) - parseInt(x2.rank)))

Answer 2

Ahhhh seems like I found the answer after some serious tinkering with the code.
I changed it to the following:

computed: {
    sortedlists() {
      return this.lists.filter(
        list => list.name.includes(this.filterByName)
      ).sort(
        (a, b) => a[this.sortBy] - b[this.sortBy]
      );
    }
  }