How to update mounted hook vue?

Question

Vue.js

I am writing a simple application like Trello at the rate on youtube. On the main board there are several boards. It’s simple there, I don’t use vuex yet, I make requests directly in the components, I understand that it’s not right, but people in the know show it like that.
First page with all boards:

<template>
  <div class="desks">
    <div class="row">
      <div class="col-lg-4"
      v-for="desk in desks"
      >
        <div class="card mt-3 mb-3" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">{{desk.name}}</h5>

          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">An item</li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
          </ul>
          <div class="card-body">
            <router-link :to="{name: 'showdesk', params:{desk_id:desk.id}}" class="card-link">
              Править доску
            </router-link>
            <a href="#" class="card-link">Другая ссылка</a>
          </div>
        </div>
      </div>
    </div>
    <div class="alert alert-danger" role="alert" v-if="errored">
      Ошибка загрузки данных!
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div class="spinner-border" role="status" v-if="loading">
        <span class="visually-hidden">Загрузка...</span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        desks: [],
        errored: false,
        loading: true
      }
    },
    mounted() {
      axios
        .get('api/v1/desks')
        .then(response => {
          this.desks = response.data.data
        })
        .catch(error =>{
          console.log(error)
          this.errored = true
        })
        .finally(()=>{
          this.loading = false
        })

    }
  }
</script>

<style scoped>

</style>

</script>

Just in case, here is the route from the route:

path: '/desk/:desk_id',
    name: 'showdesk',
    component: ShowDesk,
    props: true

And finally, the page itself where we edit the name of the board:

<template>
  <div >
    <div class="form-group mb-3">
      <input type="text" @blur="SaveName" class="form-control" v-model="name" >
    </div>
    <div class="alert alert-danger" role="alert" v-if="errored">
      Ошибка загрузки данных!
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div class="spinner-border" role="status" v-if="loading">
        <span class="visually-hidden">Загрузка...</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:[
      'desk_id'
    ],
    data(){
      return {
        name: null,
        errored: false,
        loading: true
        
      }
    },
    methods:{
      SaveName(){
        axios
          .post('/api/v1/desks/' + this.desk_id,{
            _method: 'PUT',
            name: this.name
        })
          .then(response => {
            console.log('отравляем' + this.desk_id)
          })
          .catch(error =>{
            console.log(error)
            this.errored = true
          })
          .finally(()=>{
            this.loading = false
          })
      }
    },
    mounted() {
      axios
        .get('/api/v1/desks/' + this.desk_id)
        .then(response => {
          this.name = response.data.data.name
          console.log(this.desk_id)
        })
        .catch(error =>{
          console.log(error)
          this.errored = true
        })
        .finally(()=>{
          this.loading = false
        })

    }
  }
</script>

The problem is that when I first go to the second board, for example, everything works fine, but when I go to another, for example, to the third, I still see the name of the second board.
That is, mounted gives data from the previous request, the rewriting itself goes fine, but when I go to the main page there is an old name, in order to display a new one, you need to reload the page.

Answer 1

No, you don't need to update mounted. The bottom line is that vue is all optimized, and does not remount the component if the exact same one is in the same place, it just changes the corresponding props.
In your case, instead of making a request in mounted, put it just like SaveName(hint: camelCase is accepted in js, PascalCase is only for classes) in methods and calls from there by watch desk_id ( - so that it also starts on the first load). immediate: true