How to properly organize routes in Vue 2?

Question

Vue.js

You need to organize a route on vue2, when you click on a certain element, it should go out: url/name.
But the page has to be refreshed every time, otherwise other elements are not shown.
router

{ path: "/pokemon/:name", name:'name', component: pokemonDetail,props:true}

EachItem:

<template>
    <div>
   <div>


        <p> 
     name: {{item.name}} </p>
   order:{{item.order}}
   weight:{{item.weight}}
   </div>
      <router-link :to='{name:"pokemon"}'>
        back
      </router-link>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    methods:{
       
    },
    data(){
        return{ 
         name:this.$route.params.name,
         item:[]
        }
    },
    created(){
        axios.get(`https://pokeapi.co/api/v2/pokemon/${this.name}`)
        .then((res)=>{
         this.item=res.data
        })
    },
}
</script>
<style>
</style>

When I go back to the list of pokemon and click on another character, it does not update, the name changes in the routes, but the data itself remains the same
Link:

<router-link  :to="{name:'name',params:{name:pokemon.name}}">Info</router-link>

when I select for the first time, everything works:



But the second time, the data remains the same