Vue2+cNode api 分页组件无法Ajax更新数据的问题

Question

利用CNode社区api练习过程中，分页部分组件通讯似乎没有成功，分页部分参考了http://m.jb51.net/article/950... 这篇教程，ajax换了axios和结合api更改了些属性，目前只有首页数据，无法分页，还望各位大神指点，先谢了
父组件

  <section class="main">
      <ul class="list">
          <li v-for="info in items">                                                                  
              <h4> <a class="talk" target="_blank" v-bind:href="'content.html?'+info.id">{{ info.title }}</a></h4>                     
          </li>
       </ul>

      <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList(page)"></pagination>

   </section>

分页子组件（模版）

<script type="text/template" id="paginationTpl">
        <nav v-if="all > 1">
            <ul class="pagination">
                <li v-if="showFirst"><a href="javascript:" @click="cur--">«上一页</a></li>
                <li v-for="index in indexes" :class="{ 'active': cur == index}">
                    <a @click="btnClick(index)" href="javascript:">{{ index }}</a>
                </li>
                <li v-if="showLast"><a @click="cur++" href="javascript:">»下一页</a></li>
                <li><a>共<i>{{all}}</i>页</a></li>
            </ul>
        </nav>
    </script>

注册分页子组件

    Vue.component('pagination', {
            template: '#paginationTpl',
            replace: true,
            props: ['cur', 'all', 'pageNum'],
            methods: {
                //页码点击事件
                btnClick: function (index) {
                    if (index != this.cur) {
                        this.cur = index;
                    }
                }
            },
            watch: {
                "cur": function (val, oldVal) {
                    this.$dispatch('page-to', val);
                }
            },
            computed: {
                indexes: function () {
                    var list = [];
                    //计算左右页码
                    var mid = parseInt(this.pageNum / 2);//中间值
                    var left = Math.max(this.cur - mid, 1);
                    var right = Math.max(this.cur + this.pageNum - mid - 1, this.pageNum);
                    if (right > this.all) { right = this.all }
                    while (left <= right) {
                        list.push(left);
                        left++;
                    }
                    return list;
                },
                showLast: function () {
                    return this.cur != this.all;
                },
                showFirst: function () {
                    return this.cur != 1;
                }
            }
        });

父组件实例（接收page值，Ajax更新数据 不成功）

      var vm = new Vue({
            el: '.main',
            data: {
                items: [],
                //分页参数
                pageAll: 10, //总页数,根据服务端返回total值计算
                perPage: 10 //每页数量

            },
            methods: {
                loadList: function (page) {
                    var self = this;
                    var url = ' https://cnodejs.org/api/v1/topics?p='+page;
                    this.$ajax.get(url)
                    .then(function (response) {
                        var jsons = response.data.data;
                        self.items = jsons;
                        console.log(self.items);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //初始化
                init: function () {
                    this.loadList(1);
                }
            }
        });
        vm.init();

正常打印api数据，点击页码按钮部分出现错误

点击下一页和页码部分url没有改变，始终是1

页面效果