尝试以下代码段：

const app = Vue.createApp({
  data() {
    return {
      list: [{"id": 1, "name": "aaa", "item_type": "b", "stock": 9, }, {"id": 2, "name": "bbb", "item_type": "b", "stock": 11, }, {"id": 3, "name": "ccc", "item_type": "b", "stock": 8, }, {"id": 4, "name": "ddd", "item_type": "b", "stock": 8, }, {"id": 5, "name": "eee", "item_type": "b", "stock": 8, }, {"id": 6, "name": "fff", "item_type": "a", "stock": 8, }, {"id": 7, "name": "ggg", "item_type": "b", "stock": 8, }],
      nr: 2
    }
  },
  computed: {
    filteredComics() {
      return [...this.list.filter(l => l.item_type === 'b' && l.stock > 0)]
    },
    comics() {
      return this.filteredComics.slice(0, this.nr)
    }
  },
  methods: {
    loadMore() {
      this.nr = this.nr + this.nr
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <ul>
    <li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" v-for="(comic, index) in comics">
      {{ comic.name }}
    </li>
  </ul>
  <button @click="loadMore" v-if="nr < filteredComics.length">more</button>
</div>

我会使用一个计算列表变量（包含预过滤的实际列表）沿着一个loadMoreTimes索引（“load more”按钮被按下了多少），它提供了对过滤列表的简单访问，如下所示：

computed: {
  filteredList() {
    return this.list
             .filter(comic => comic.item_type === 'b' && comic.stock > 0)
             .slice(0, (this.loadMoreTimes + 1) * 20);
  }
}

然后，您可以简单地在该数组上循环

<li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" 
v-for="(comic, index) in filteredList">

顺便说一句：在同一个元素中使用v-if和v-for不是一个好的做法。