Как сделать фильтр по товарам vue js/ vuex?

Question

[700Hp]

Компонент товаров:

<div class="create__item" v-for="item in getDocuments" :data-id="item._id">
                <div class="create__name">{{ item.title }}</div>
                <div class="create__price">{{ item.currentPrice }} рублей</div>
              </div>

const currentDocuments = ref([])

const getDocuments = computed(() => {
        currentDocuments.value = store.getters['document/getDocuments'].slice(startIndexForArray.value, endIndexForArray.value)
        const num = store.getters['document/getDocuments'].length / 4
        if (num === 0) return maxStep.value = num
        if (num % 1 === 0) {
          maxStep.value = num + 1
        } else {
          maxStep.value = Math.ceil(num)
        }
        return currentDocuments.value
    })

Store:

getters: {
    getDocuments(state) {
      return state.documents
    }
  },
  mutations: {
    setDocuments(state, documents) {
      if (Array.isArray(documents)) {
        return state.documents = documents
      } else {
        return state.documents.push(documents)
      }
    },
  },

Как грамотно реализовать фильтр по категориям?
Есть компонент, который создаёт товары. И при включенной фильтрации он не отрисовывает только что созданный товар в данной категории. Например: я открыл категорию "бесплатно", только что в компоненте ниже добавил товар в данную категорию, а в категории он не появляется. В обычном списке отрисовывается сразу.
Было идея прокидывать пропс:

Мой вариант фильтра:

const getFilterDocuments = computed(() => {
      filterDocuments.value = store.getters['document/getDocuments'].filter(doc => doc.category === filter.value)
      currentDocuments.value = filterDocuments.value.slice(startIndexForArray.value, endIndexForArray.value)
      const num = filterDocuments.value.length / 4
      if (num === 0) return maxStep.value = num
      if (num % 1 === 0) {
        maxStep.value = num + 1
      } else {
        maxStep.value = Math.ceil(num)
      }
      // if (props.item.category === filter.value) currentDocuments.value.push(props.item)
      return currentDocuments.value
    })