how should the request interface be written if you want to listen for changes in the value of checkbox in this way?

<template>
    <div class="home-wrap">
        <HeadNav></HeadNav>
        <div class="bg-eee">
            <div class="top-menu-wrap">
                <ul class="top-menu top-menu-rank">
                    <li :class="{active:tabId===1}" data-type="1" v-on:click="checkoutTab(1,inRank)">
                        <a href="javascript：void(0);" data-trackhref="btn_comm_topnum"></a>
                    </li>
                    <li :class="{active:tabId===2}" data-type="2" v-on:click="checkoutTab(2,inRank)">
                        <a href="javascript：void(0);" data-trackhref="btn_comm_toptime"></a>
                    </li>
                </ul>
                <ul class="top-rank">
                    <li>
                        <input type="checkbox" v-model="inRank">
                        <label></label>
                    </li>
                    <li>
                        <p class="rank-current">:<span>18</span>

                    </li>
                </ul>
            </div>
            <div class="bar"></div>
            <div class="list-title" v-if="tabId===1">
                <span class="space"></span>
                <span class="space-img"></span>
                <span class="author"></span>
                <span class="money"></span>
            </div>
            <div class="list-title" v-if="tabId===2">
                <span class="space"></span>
                <span class="space-img"></span>
                <span class="author"></span>
                <span class="money"></span>
            </div>
        </div>
        <div class="rank-list">
            <div class="dropload-up">
                <div class="dropload-refresh"></div>
            </div>
            <ul v-if="tabId===1">
                <li class="list-item" v-for="(item,index) in list">
                    <strong v-text="index+1"></strong>
                    <img :src="item.headurl">
                    <p class="author" v-text="item.name">

                    <p class="content">{{item.cost}}

                </li>
            </ul>
            <ul v-if="tabId===2">
                <li class="list-item" v-for="(item,index) in list">
                    <strong v-text="index+1"></strong>
                    <img :src="item.headurl">
                    <p class="author" v-text="item.name">

                    <p class="content">{{item.cost}}

                </li>
            </ul>
            <div class="dropload-down"></div>
        </div>
    </div>
</template>
<script>
    import HeadNav from "../../components/HeadNav.vue";
    import utils from "../../modules/utils.js"
    function getList(_this, type,inRank) {
        var api = utils.getApi("rank");
        utils.http({
            url: `${api}`,
            data: {
                type,
                inRank//
            },
            success: function (res) {
                console.log(res);
            },
            fail: function (e) {
                console.log("this", _this)
                console.log("rank",inRank)
                _this.list = [
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    },
                    {
                        "headurl": "http://img4.imgtn.bdimg.com/it/u=105283187,2954621639&fm=27&gp=0.jpg",
                        "name": "lxt",
                        "cost": "237",
                        "days": "30",
                        "num": "10"
                    }
                ];
            }
        });
    }
    export default {
        name: "app",
        components: {
            HeadNav
        },
        data: function () {
            return {
                list: [],
                tabId: 1,
                inRank: true
            }
        },
        methods: {
            checkoutTab: function (type,inRank) {
                this.tabId = type;
                getList(this, type,inRank);

            }
        },
        watch:function () {
            getList(this, 1,this.inRank);
        },
        mounted: function () {
            getList(this, 1,this.inRank);
        }

    }
</script>