How to cache filtered out elements to prevent re-rendering inside a v-for?

Solution for How to cache filtered out elements to prevent re-rendering inside a v-for?
is Given Below:

I’ve been working on a Vue.js application that manages user’s notes and allows to easily look them up by title, tags, etc. So the primary view of a logged-in user is a list view of Card components. I’m using v-lazy and group-transition components to enhance usability. Everything works fine, but…

When the set of notes becomes larger (100+ Cards), one can notice (especially on mobile devices) that filtering slows down. After some debugging I found that the filtering calculations are not the heavy part but the re-rendering of filtered components is the real problem.
Let’s say, with the following scenario:

  • there’s a list of 150 Card components
  • the user scrolled down to the end of the page, so that 150 Cards are in fact rendered and one of them contains tag: tag-1
  • if the user clicks on tag-1, 149 Cards get filered out, the 1 result
    remains Vvue debug tool shows that 149 Card components get destroyed as the computed method visibleCards contains only one element)
  • if the user unclicks the tag-1, all 149 Cards are re-rendered again
    (Vue debug tool shows that 149 Cards are fully re-created again)

Below, there’s the meat of my Card list displaying view:

   <v-row justify="center" dense class="px-sm-2">
      <transition-group
        name="list"
        tag="div"
        class="cardListTransition col-12 pa-0"
      >
        <v-row
          :id="'columnid-' + index"
          v-for="(card, index) in visibleCards"
          :key="card.id + ':' + card.created"
          justify="center"
          class="snipSingleRow"
        >
          <v-col lg="10" xl="8" class="pt-0 mb-lg-4 mb-xl-4">
            <v-sheet min-height="50" class="fill-height" color="transparent">
              <!-- 'threshold: indicates at what percentage of the target's visibility -->
              <!-- the observer's callback should be executed. -->
              <v-lazy
                v-model="card.active"
                :options="{
                  threshold: 0.8,
                }"
                class="fill-height"
                transition="list"
              >
                <Card :card="card" />
              </v-lazy>
            </v-sheet>
          </v-col>
        </v-row>
      </transition-group>
    </v-row>

where: visibleCards is a result of a computed method inside of which filtering occurs.

Is there any way – I’ve experimented with v-once or keep-alive, etc. with no help – to save / cache the filtered out components to prevent them from re-rendering once the filters are cleared?

PS.
Stripping down the list i.e. removing v-lazy or group-transition doesn’t solve the problem.

I’d appreciate any help / suggestions or further reading on how to solve my problem.