title: how to update data using before route update in vuejs
body: <p>i'm trying to update the list of products under a categories each time i click the {{category.type}} in my browser when i'm on the category.ID routes, if i click on the category it doesn't update</p>
  <p>this is the error i get each time i click a new category on the category.Id page</p>
  <pre><code>vue-router.esm.js?880d:1905 TypeError: Cannot read properties of undefined (reading 'category')
      at VueComponent.beforeRouteUpdate (Category.vue?0432:103:1)
  </code></pre>
  <p>this is my script tag</p>
  <pre><code>&lt;script&gt;
  import { mapActions } from &quot;vuex&quot;;
  import axios from &quot;axios&quot;;
  export default {
    name: &quot;Product&quot;,
    components: {},
    data() {
      return {
        category: {},
        categories: [],
        products: [],
        catID: []
      };
    },
    mounted() {
      axios
        .get(
          `https://taad.herokuapp.com/api/categories/${this.$route.params.id}`,
          {}
        )
        .then(response =&gt; {
          console.log(response);
          this.category = response.data.category;
        })
        .catch(error =&gt; {
          console.log(error);
          error;
        });
  
      axios
        .get(`https://taad.herokuapp.com/api/products`, {})
        .then(response =&gt; {
          console.log(response);
  
          this.products = response.data.products;
          const catID = this.category._id;
          // this.products = this.products.filter(
          //  ({ category }) =&gt; catID === category._id
          // );
        })
        .catch(error =&gt; {
          error;
        });
      axios.get(&quot;https://taad.herokuapp.com/api/categories&quot;).then(res =&gt; {
        console.log(res);
        this.categories = res.data.categories;
      });
    },
    beforeRouteUpdate(to, from, next) {
      // console.log('Reusing this component.')
      this.category = this.categories.find(
        category =&gt; category.id === to.params.categoryId
      );
      // console.log('Entering User', to.params.userId)
  
      next();
    },
    computed: {
      currentProducts() {
        if (!this.category._id) {
          return this.products;
        }
        return this.products.filter(
          ({ category }) =&gt; category._id === this.category._id
        );
      }
    },
    methods: {
      ...mapActions([&quot;addProductToCart&quot;]),
      logout() {
        localStorage.clear();
        this.$router.push(&quot;/login&quot;);
      }
    }
  };
  &lt;/script&gt;
  
  
  </code></pre>
  <p>please how do i update the list of products under the specific category.id when clicked</p>