Vuex multiple passing arrays or some other way

There is a component filter with checkbox buttons. When you click on the button, the api gives 20 products in this category. And they are displayed on the page.

Component

    this.$store.commit(
     'showFilteredList',
     response.data.items
    );

filter.js

    state: {
     filteredBrands: []
    },

    mutations: {
     showFilteredList(state, payload) {
     if(payload.length < 1) {
      console.log('clear');
     } else {
      state.filteredBrands = payload;
      }
     }
    }

The problem is that if I select 1 more checkbox, then other products from the category arrive, the previous ones are overwritten by state.filteredBrands = payload;, associated with this line. But state.filteredBrands.push(payload) won't work. In general, I would like the products to be displayed on the page when two or more checkboxes are selected; if the checkbox is removed from any one, the products are removed.

What needs to be changed or added?