How to get dynamic data?

Question

Vue.js

I do something like a blog. As usual - categories, by clicking on any of them, articles from the database should be pulled up.
In principle, everything works, but there is a glitch - if you click, for example, on the first category, articles from the first category appear, but if you click right there on the second category, nothing happens, only the address changes.
But if the page is refreshed, then articles from the second category are displayed. Also, if after clicking on the first category go to the main page, and then to the second category, then everything works. I suspect that this is due to the fact that I use the same component to display articles.
Tell me how to deal with this.

Article output component:

<div class="container">
      <div class="row">
          <div class="col-3">
              <h4 v-if="articles.length !== 0" v-for="article in articles">
                  {{ article.title}}
              </h4>
              <h4 v-else>
                  Нет ни одной записи
              </h4>
          </div>
          <div class="col-9"></div>
      </div>
  </div>

import axios from "axios";
export default {
    props: [
        'alias'
    ],

    data() {
        return {
            articles: [],
        }
    },

    methods: {
        async getArticles(alias) {
            await axios.get('/api/categories/' + this.alias)
                .then(response => {
                    this.articles = response.data;
                })
        }
    },
    mounted() {
        this.getArticles();
    }
}

Answer 1

The article rendering component is not instantiated when the category is changed, so the mounted hook is not called. Accordingly, the getArticles method is not called either - so the articles are not updated.
New data should be loaded not when the component is mounted, but when the value of the parameter representing the category changes:

watch: {
  alias: {
    immediate: true,
    handler: 'getArticles',
  },
},