想這樣 監(jiān)聽checkbox的值 變化的話就請求接口 應(yīng)該怎么寫啊

<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">供燈數(shù)量</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">供燈時(shí)長</a>
                    </li>
                </ul>
                <ul class="top-rank">
                    <li>
                        <input type="checkbox" v-model="inRank">
                        <label>參與功德榜排名</label>
                    </li>
                    <li>
                        <p class="rank-current">我的當(dāng)前排名:<span>第18名</span></p>
                    </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">供燈數(shù)量</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">供燈時(shí)長</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>
                    <p class="content">{{item.cost}}盞</p>
                </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>
                    <p class="content">{{item.cost}}天</p>
                </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>