Why is the GET request not leaving?

Question

Vue.js

I create a blog with posts. Implemented 1-display of posts, 2-display of one post, 3-categories of posts. For example, I click on the 'JavaScript' category to display all posts with this category, everything works. But if you then click on another category, then it does not display anything (there are no errors in the console). The request does not go to the GET server, only the "id" of the category I click on is transmitted in the address bar.
app.vue

<template>
    <div id="app">
        <b-container>
            <app-header/>
                <b-row>
                    <b-col cols-xs="6" md="4"><app-aside/></b-col>
                    <b-col><router-view/></b-col>
                </b-row>
        </b-container>
    </div>
</template>

<script>
import Header from './components/commons/App-header'
import Aside from './components/commons/App-aside'
export default {
    name: "app",
    components: {
        'app-header': Header,
        'app-aside': Aside, 
    },

};
</script>

home.vue

<template>
    <div>
        <b-row>
            <b-col><blog-feed/></b-col>
        </b-row>
    </div>
</template>

<script>
import BlogFeed from './commons/BlogFeed'
export default {
    name: 'Home',
        components: {
            'blog-feed': BlogFeed,
    },
}
</script>

app-aside.vue

<template>
    <div>
        <b-card title="Card Category">
            <div v-for="category in categories" :key="category.id">
                <router-link :to="{name: 'post_filter', params: {id: category.id}}">{{ category.name }}</router-link>
            </div>
        </b-card>
    </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
    name: 'App-aside',
    computed: mapGetters ({
        categories: 'categories'
    }),
    created() {
        this.$store.dispatch('GET_CATEGORIES')
    }

}
</script>

Here I am getting posts from
PostFilter.vue category

<template>
    <div>
        <div v-for="post in category" :key="post.id">
            <b-card>
                <h3>{{ post.title }}</h3>
                {{ post.body }}
            </b-card>
        </div>
    </div>
</template>

<script>
import Aside from './commons/App-aside'
import { mapGetters } from 'vuex'
export default {
    name: 'PostFilter',
    computed: mapGetters ({
        category: 'category'
    }),
    created() {
        this.$store.dispatch('GET_FILTER_CATEGORY', this.$route.params.id)
    }

}
</script>

Answer 1

Your request is sent to created, and when parameters change, the component instance is not re-created. Do a watch on $route.params.idand send the request in the appropriate handler.