Vue：算出プロパティが正常に動作しない

Question

VueJS 初学者です。
学習中に詰まってしまったので、お助けいただけますと幸いです。

前提・実現したいこと

商品を定期的にお届けするサービスを作成しており、マイページから商品の内容を自由に変更できるようにしたい。
・現在定期購入している商品と定期購入していないそれ以外の商品を分けて表示したい。
・定期購入していない商品の個数を増やすと（デフォルトは0）、自動的に定期購入のリストに追加され、定期購入ではないリストから削除される。
・定期的に購入している商品は Vuex の store/user ファイルに保管している。
・全てのプロダクトの情報はCMS（Contentful）から fetch でとってきている。

使用している技術
Vue/Vuex/Nuxt

発生している問題

初期ローディングでは定期購入商品、その他商品が正しく表示されているが、その他商品の個数を変更すると定期購入商品リストに追加されるが、その他商品リストから削除されない

該当のソースコード

// store/user.js

export const state = () => ({
  info: {
    name: "田中 太郎",
    email: "[e-mail]",
    address: "千葉県 市川市 行徳 シェアプレイイス行徳",
    postcode: "9011403",
    phone: "09090909090",
    rank: "gold",
    mile: "2,800",
    point: "500"
  },

  subscription: {
    subscribed: true,
    discountRate: 20,
    order: [
      {
        id: "maple",
        quantity: 12
      },
      {
        id: "chocolate",
        quantity: 8
      }
    ],
    deliveryDate: { latest: "", next: "" },
    orderHistory: []
  }
});

export const mutations = {
  ADD_PRODUCT_TO_SUBSCRIPTION(state, product) {
    state.subscription.order.push(product);
  },
  CHANGE_PRODUCT_QUANTITY(state, { id, quantity }) {
    const item = state.subscription.order.find(item => item.id === id);
    item.quantity = quantity;
  },
  REMOVE_PRODUCT_FROM_SUBSCRIPTION(state, product) {
    state.subscription.order = state.subscription.order.filter(
      item => item.id !== product.id
    );
  }
};

// components/subscription.vue
<template>
 <div>
  <ul v-if="subscription.subscribed">
   <li
    v-for="product in subscribedItems"
    :key="product.id"
   >
  </ul>
  <ul>
   <li
    v-for="product in unsubscribedItems"
    :key="product.id"
   >
  </ul>
 </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      allProducts: [],
      availableQuantity: [0, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
    };
  },
  computed: {
    ...mapState("user", ["subscription"]),
    subscribedItems() {
      let items = [];
      this.allProducts.forEach((product) =>
        this.subscription.order.forEach((item) => {
          if (item.id === product.id)
            items.push({ ...product, quantity: item.quantity });
        })
      );
      return items;
    },
    // 商品の個数を変更した際に再度呼ばれてはいるが、追加した商品が残ったまま
    unsubscribedItems() {
      let items = this.allProducts.filter((product) => {
        const item = this.subscription.order.find((item) => {
          item.id === product.id;
        });
        return item ? false : true;
      });

      return items;
    },
  },
  methods: {
    addItem(product, event) {
      let quantity = Number(event.target.value);
      this.$store.commit("user/ADD_PRODUCT_TO_SUBSCRIPTION", {
        id: product.id,
        quantity,
      });
    },
    changeItemQuantity(product, event) {
      let quantity = Number(event.target.value);

      if (quantity > 0) {
        this.$store.commit("user/CHANGE_PRODUCT_QUANTITY", {
          id: product.id,
          quantity,
        });
      } else {
        this.$store.commit("user/REMOVE_PRODUCT_FROM_SUBSCRIPTION", {
          id: product.id,
        });
      }
    },
    removeItem(product) {
      this.$store.commit("user/REMOVE_PRODUCT_FROM_SUBSCRIPTION", product);
    },
  },
  async fetch() {
    const { products } = await this.$contentfulApi.getProducts();
    this.allProducts = [...products];
  },
};
</script>