VUE2.0 switch details page data

list page Click to the details page to switch details according to id.
list page: click function adds this.$router.push ({name: "detail", params: {id: id}});
details receive the passed id this.$route.params.id,

the right column of the list page makes a navigation (hot article), click on the hot article to switch the details
the problem is: address bar: xx/detail/id can be passed normally, details remain the same
if the normal hash changes, the corresponding details should be changed. Click on the hot article, although the hash has changed, the details page is loaded only once
which vue god can tell you the reason

Code for three specific pages:
APP.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
  <aside>
    <hotList></hotList>
  </aside>
</template>

<script type="text/ecmascript-6">
  import Vue from "vue"
  import artList from "./components/artList.vue"
  import hotList from "./components/hotList.vue"
  export default {
    name:"app",
    components: {
      hotList,
      artList
    }
  }

</script>

hotList.vm, hotList.vm and artList.vm have the same code logic

<template>
  <div id="hotlist" class="hotlist">
    <ul>
      <li v-for="(item,index) in items" @click="goDetail(item.id)">
          {{ item.title }}
      </li>
    </ul>
  </div>

</template>

<script type="text/ecmascript-6">
  export default {
    name:"hotlist",
    data () {
      return {
        items: null,
      }
    },
    mounted: function(){
      this.$http.get("/api/list").then( function (response) {
        this.items = response.data
      }, function(error) {
        console.log(error)
      })

    },
    methods:{
      goDetail(id){
        this.$router.push({ name: "detail", params: { id: id }});
      },
    }
  }
</script>

detail.vue

<template>
  <div id="detail" class="detail">
    <h2>{{detail.title}}</h2>
    {{ detail.description }}
  </div>

</template>

<script type="text/ecmascript-6">
  export default {
    name:"detail",
    data () {
      return {
        listId: this.$route.params.id,
        detail: {},
      }
    },
    mounted: function(){
      this.getDetail();
    },
    methods: {
      getDetail(){
        this.$http.get("/api/list/" + this.listId)
          .then(function (res) {
            this.detail   = res.data.id ? res.data : JSON.parse(res.request.response);
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
    }
  }
</script>

routing:

import artListfrom "../components/artList.vue"
import detail from "../components/detail.vue"
const router = new VueRouter({
  routes:[
    {
      path:"/home",
      name: "home",
      component: artList,
      },
       {
      path: "/home/artList/detail/:id",
      name: "detail",
      component: detail,
    }
    ]
    });
    export default router;