Как добавить товар в корзину на странице с большим количеством товаров в E-commerce Vue.js / Django Rest Framework?

Я создаю сайт электронной коммерции с Vue.js и Django Rest Framework. У меня есть страница со всеми последними продуктами, которая работает хорошо и получает все данные. Я могу посетить детали каждого продукта и добавить их в корзину (на странице каждого продукта). Проблема в том, что я не знаю и не могу добавить эти продукты со страницы общих продуктов, где есть несколько продуктов, и получить количество продуктов каждого из них. Я создал динамический Id для ввода числа, но когда я пытаюсь использовать его, он говорит "Cannot read property 'value' of null" Я понимаю, что количество продуктов должно быть связано с каждым из продуктов, но я не могу понять, как это сделать.

Подведем итог: Как я могу добавить товар в корзину на странице с несколькими товарами, полученными через v-for? Спасибо!

Вот код моей страницы продуктов Vue.js:

А вот код страницы с одним товаром, который работает совершенно нормально:

А это функция Vue Store для добавления в корзину:

    addToCart(state, item) {
      const exists = state.cart.items.filter(i => i.product.id === item.product.id)
      if (exists.length) {
        exists[0].quantity = parseInt(exists[0].quantity) + parseInt(item.quantity)
      } else {
        state.cart.items.push(item)
      }

      localStorage.setItem('cart', JSON.stringify(state.cart))
    }