@s-molinari, QInfiniteScroll just loading more data, this is not a virtual list.
Virtual list replace nodes that are out of viewport with white space like margin.
This solves a performance problem if the page has a large list. (500 000 simple nodes or more 500 components in v-for which render more than 0.5 ms per item)

I use vue-virtual-scroller to solve this problem.

https://github.com/Akryum/vue-virtual-scroller

Please add scrolling while holding the middle mouse button on desktop

In play app errors in console while i scrolling when left or right driver is open.
I hope this version is still maintained.

quasar 0.17.20
chrome 73.0.3683.103

https://quasar-framework.org/quasar-play/android/index.html#/showcase/layout-demo/play-with-layout
https://www.chromestatus.com/features/6662647093133312

Your state is similar to

const state = {
  state: {
    paidMonthlyExpenses: []
  }
}

You should set it like (two times “state”)

state.state.paidMonthlyExpenses = [...state.state.paidMonthlyExpenses, key]

@s-molinari In the getter, you can choose from where you need to get the value, and in the “input” handler, choose where you want to assign it.

QCard component has class q-card
use:

<style lang=“stylus”>
.q-card
  width 300px
</style>

or add own class

<q-card class="myOwnClass">...</q-card>

<style lang=“stylus”>
.myOwnClass
  width 300px
</style>

You can bind value and handle theinput event
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components