Starter code for Vue sortable, paginated table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue2 Table</title>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

    <div id="myApp" v-cloak>
        <input type="text" name="q" placeholder="Search for..." v-model="searchQuery" autocomplete="off" />
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="customer in customerList">
                    <td>{{ customer.id }}
                    <td>{{ customer.first_name }} {{ customer.last_name }}</td>
                    <td>{{ customer.city }}</td>
                    <td>{{ customer.country }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>
        var vm = new Vue({
            el: '#myApp',
            data: {
                searchQuery: '',
                customers: [{"id":1,"first_name":"Micki","last_name":"Phorsby","city":"San Justo","country":"Argentina"},{"id":2,"first_name":"Myra","last_name":"Castillou","city":"Thị Trấn Ngọc Lặc","country":"Vietnam"},{"id":3,"first_name":"Estrellita","last_name":"Brandli","city":"Tegalwero","country":"Indonesia"},{"id":4,"first_name":"Marketa","last_name":"Goodman","city":"Yuewan","country":"China"},{"id":5,"first_name":"Anett","last_name":"Denslow","city":"Huangbao","country":"China"},{"id":6,"first_name":"Chantalle","last_name":"Dearle-Palser","city":"Kangin","country":"Indonesia"},{"id":7,"first_name":"Theresita","last_name":"Saddington","city":"Wādī as Sīr","country":"Jordan"},{"id":8,"first_name":"Graig","last_name":"Harmstone","city":"Sipocot","country":"Philippines"},{"id":9,"first_name":"Sisely","last_name":"Faier","city":"Pristina","country":"Kosovo"},{"id":10,"first_name":"Hughie","last_name":"Purseglove","city":"Turija","country":"Serbia"},{"id":11,"first_name":"Torin","last_name":"Hubbold","city":"Pilcuyo","country":"Peru"},{"id":12,"first_name":"Milli","last_name":"Haldenby","city":"Apeldoorn","country":"Netherlands"},{"id":13,"first_name":"Gabriello","last_name":"Joel","city":"Wijewo","country":"Poland"},{"id":14,"first_name":"Enrica","last_name":"Rathke","city":"Pagak","country":"Indonesia"},{"id":15,"first_name":"Archambault","last_name":"Tomlinson","city":"Xinshi","country":"China"},{"id":16,"first_name":"Nathan","last_name":"Biford","city":"Tomar","country":"Portugal"},{"id":17,"first_name":"Emmey","last_name":"Sloat","city":"Giebułtów","country":"Poland"},{"id":18,"first_name":"Arlyn","last_name":"Stallon","city":"Odesskoye","country":"Russia"},{"id":19,"first_name":"Esta","last_name":"Sparling","city":"Bilajari","country":"Azerbaijan"},{"id":20,"first_name":"Alanah","last_name":"Breslin","city":"Zebrzydowice","country":"Poland"},{"id":21,"first_name":"Valentia","last_name":"Cockley","city":"Volokonovka","country":"Russia"},{"id":22,"first_name":"Dell","last_name":"Dimmne","city":"San Bernardino","country":"United States"},{"id":23,"first_name":"Jacqueline","last_name":"Morefield","city":"Dondo","country":"Mozambique"},{"id":24,"first_name":"Archambault","last_name":"Plant","city":"Sison","country":"Philippines"},{"id":25,"first_name":"Lauraine","last_name":"Losbie","city":"Radamata","country":"Indonesia"},{"id":26,"first_name":"Hollyanne","last_name":"Hariot","city":"Tomaševac","country":"Serbia"},{"id":27,"first_name":"Lucia","last_name":"Kesby","city":"Ekou","country":"China"},{"id":28,"first_name":"Puff","last_name":"Grimble","city":"Erie","country":"United States"},{"id":29,"first_name":"Harris","last_name":"Whittek","city":"Yong’an","country":"China"},{"id":30,"first_name":"Conroy","last_name":"Snowball","city":"Pandat","country":"Indonesia"},{"id":31,"first_name":"Alvan","last_name":"Conaboy","city":"Montesson","country":"France"},{"id":32,"first_name":"Darcee","last_name":"Valentine","city":"Novotitarovskaya","country":"Russia"},{"id":33,"first_name":"Fredia","last_name":"Gallop","city":"Arkalyk","country":"Kazakhstan"},{"id":34,"first_name":"Guinevere","last_name":"Kemshell","city":"Suugaant","country":"Mongolia"},{"id":35,"first_name":"Andre","last_name":"Terram","city":"Atlantis","country":"South Africa"},{"id":36,"first_name":"Salome","last_name":"Becerra","city":"Bairro de Santo António","country":"Portugal"},{"id":37,"first_name":"Fidela","last_name":"MacPaden","city":"Rushankou","country":"China"},{"id":38,"first_name":"Sherman","last_name":"McNally","city":"Bulawayo","country":"Zimbabwe"},{"id":39,"first_name":"Angeli","last_name":"Phifer","city":"Wailang","country":"China"},{"id":40,"first_name":"Randie","last_name":"Larret","city":"Gaocun","country":"China"},{"id":41,"first_name":"Shelba","last_name":"Hallex","city":"Porvenir","country":"Uruguay"},{"id":42,"first_name":"Weber","last_name":"Benoist","city":"Lubomierz","country":"Poland"},{"id":43,"first_name":"Rudy","last_name":"Sagg","city":"Gobojango","country":"Botswana"},{"id":44,"first_name":"Clotilda","last_name":"Abelwhite","city":"Iwye","country":"Belarus"},{"id":45,"first_name":"Mathe","last_name":"Largent","city":"Baltimore","country":"United States"},{"id":46,"first_name":"Leigh","last_name":"Petticrow","city":"Vagos","country":"Portugal"},{"id":47,"first_name":"Junia","last_name":"Tuvey","city":"Hörby","country":"Sweden"},{"id":48,"first_name":"Krissie","last_name":"McCrorie","city":"Hor","country":"China"},{"id":49,"first_name":"Sallee","last_name":"Malloy","city":"Baitu","country":"China"},{"id":50,"first_name":"Amalita","last_name":"Vinson","city":"Siemiatycze","country":"Poland"},{"id":51,"first_name":"Braden","last_name":"Jakubovicz","city":"Dahe","country":"China"},{"id":52,"first_name":"Dorine","last_name":"Sumnall","city":"Portachuelo","country":"Bolivia"},{"id":53,"first_name":"Tina","last_name":"Rampley","city":"Landskrona","country":"Sweden"},{"id":54,"first_name":"Jade","last_name":"Wheldon","city":"La Sarre","country":"Canada"},{"id":55,"first_name":"Valentino","last_name":"Wishkar","city":"Eucaliptus","country":"Bolivia"},{"id":56,"first_name":"Dru","last_name":"Simionato","city":"Purbalingga","country":"Indonesia"},{"id":57,"first_name":"Zerk","last_name":"Skone","city":"San Francisco","country":"Mexico"},{"id":58,"first_name":"Kimmie","last_name":"Jako","city":"Thouars","country":"France"},{"id":59,"first_name":"Abe","last_name":"Champ","city":"Fristad","country":"Sweden"},{"id":60,"first_name":"Pate","last_name":"Semens","city":"Paraíso","country":"Panama"},{"id":61,"first_name":"Danit","last_name":"Sewell","city":"Wenquan","country":"China"},{"id":62,"first_name":"Candis","last_name":"Thresh","city":"Al Jafr","country":"Saudi Arabia"},{"id":63,"first_name":"Alejandra","last_name":"Jakubovits","city":"Myaydo","country":"Myanmar"},{"id":64,"first_name":"Lancelot","last_name":"Rashleigh","city":"Huizhou","country":"China"},{"id":65,"first_name":"Vance","last_name":"Pretious","city":"Drahovo","country":"Ukraine"},{"id":66,"first_name":"Corilla","last_name":"Bosence","city":"Bato","country":"Philippines"},{"id":67,"first_name":"Poul","last_name":"Baud","city":"Benešov","country":"Czech Republic"},{"id":68,"first_name":"Tedra","last_name":"Nuttey","city":"El Corpus","country":"Honduras"},{"id":69,"first_name":"Brigitta","last_name":"Dane","city":"Zheleznodorozhnyy","country":"Russia"},{"id":70,"first_name":"Sinclare","last_name":"O'Donnell","city":"Osvaldo Cruz","country":"Brazil"},{"id":71,"first_name":"Angelique","last_name":"McKissack","city":"Luna","country":"Philippines"},{"id":72,"first_name":"Aubrey","last_name":"Full","city":"Bezlyudivka","country":"Ukraine"},{"id":73,"first_name":"Ivette","last_name":"Kmiec","city":"Krutja e Poshtme","country":"Albania"},{"id":74,"first_name":"Effie","last_name":"Dollard","city":"Wrocław","country":"Poland"},{"id":75,"first_name":"Deanne","last_name":"Paramor","city":"Kertapura","country":"Indonesia"},{"id":76,"first_name":"Brandea","last_name":"Jepperson","city":"Bente","country":"Indonesia"},{"id":77,"first_name":"Larissa","last_name":"Blaine","city":"Charleston","country":"United States"},{"id":78,"first_name":"Sandy","last_name":"Smogur","city":"Avaré","country":"Brazil"},{"id":79,"first_name":"Bernadina","last_name":"Thomkins","city":"Maanas","country":"Philippines"},{"id":80,"first_name":"Jermain","last_name":"Bourdice","city":"Xiyuan","country":"China"},{"id":81,"first_name":"Kenton","last_name":"Aylin","city":"Saint-Pierre","country":"Reunion"},{"id":82,"first_name":"Stormie","last_name":"Duddan","city":"Kamensk-Shakhtinskiy","country":"Russia"},{"id":83,"first_name":"Maurice","last_name":"Arunowicz","city":"Vila Fria","country":"Portugal"},{"id":84,"first_name":"Pansy","last_name":"Gilardengo","city":"Shakhun’ya","country":"Russia"},{"id":85,"first_name":"Dasya","last_name":"Sabatier","city":"Cabugao","country":"Philippines"},{"id":86,"first_name":"Penelopa","last_name":"Hachard","city":"Markušica","country":"Croatia"},{"id":87,"first_name":"Beale","last_name":"Coltman","city":"Bantarjati","country":"Indonesia"},{"id":88,"first_name":"Garwin","last_name":"Lonergan","city":"Phu Kradueng","country":"Thailand"},{"id":89,"first_name":"Coletta","last_name":"Sends","city":"Maraial","country":"Brazil"},{"id":90,"first_name":"Tori","last_name":"Tidd","city":"Yangcun","country":"China"},{"id":91,"first_name":"Jobi","last_name":"Bonnell","city":"Radomir","country":"Bulgaria"},{"id":92,"first_name":"Tierney","last_name":"Sandells","city":"Primero de Mayo","country":"Mexico"},{"id":93,"first_name":"Kendricks","last_name":"Shildrick","city":"Kokofata","country":"Mali"},{"id":94,"first_name":"Biron","last_name":"Huikerby","city":"Onomichi","country":"Japan"},{"id":95,"first_name":"Madalena","last_name":"Moorton","city":"Kokofata","country":"Mali"},{"id":96,"first_name":"Lucilia","last_name":"Kendrick","city":"Krouna","country":"Czech Republic"},{"id":97,"first_name":"Laney","last_name":"Baribal","city":"Kelapa","country":"Indonesia"},{"id":98,"first_name":"Wolfy","last_name":"Lucock","city":"Samran","country":"Thailand"},{"id":99,"first_name":"Linnea","last_name":"Godehard.sf","city":"Jisegumen","country":"China"},{"id":100,"first_name":"Karita","last_name":"Waller","city":"Skelivka","country":"Ukraine"}],
            },
            computed: {
                customerList: function() {
                    return this.customers.filter(item => {
                        if (!this.searchQuery) {
                            // If there's no search term, return the item immediately
                            return item;
                        } else {
                            // Otherwise, only return the item if we have a match
                            return (
                                item.id.toString().indexOf(this.searchQuery) > -1 ||
                                item.first_name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 ||
                                item.last_name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 ||
                                item.city.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 ||
                                item.country.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
                            );
                        }
                    })
                }
            }
        });
    </script>
</body>
</html>