Vue how to output elements with specific filter parameter?

Question

Vue.js

There is an output of elements:

<div class="apartment-search-results" v-if="showedItems.length">
                    <div class="apartment-search-result" v-for="(item, index) in showedItems" :key="`apart_${item.id}`">
                        <div class="apartment-search-result__caption"><span>{{ item.roomsCount }}</span><span>{{ getWordByNumber(item.roomsCount, ['комната', 'комнаты', 'комнат']) }}</span>
                        </div>
                        <div class="apartment-search-result__image"><img :src="item.image"
                                                                         :alt="`${item.roomsCount} комнаты`"></div>
                        <div class="apartment-search-result__params"><span>Общая площадь</span><span class="big-text">{{ item.space }} м²</span>
                        </div>
                        <div class="apartment-search-result__params"><span>Цена за м²</span><span class="big">{{ item.costPerMeter }} ₽</span>
                        </div>
                        <hr class="block-break">
                        <div class="status">{{ item.status }}</div>
                        <div class="apartment-search-result__price">{{ item.fullCost }} ₽</div>
                        <a class="button button--expanded button--font-bold button--style-orange" :href="item.url">Узнать
                            подробнее</a>
                    </div>
                </div>

The block with the status class contains three values ​​for the element: Sold, Available, Reserved. Statuses are edited through the Bitrix admin panel.
How to make vue only render elements with "In stock" values?

The output function itself:

window.moduleAparts = new Vue({
        components: {numberInputComponent},
        el: '#moduleAparts',
        name: 'ApartsSearch',
        data() {
            return {
                minPrice: null,
                maxPrice: null,
                buildingNumber: 1,
                floorNumber: 1,
                buildingNumber2: 1,
                floorNumber2: 1,
                floorNumber_10: 1,
                show_floor: '9',
                roomsCount: [],
                loading: false,
                isSearched: false,
                items: [],
                showedItemsCount: addCount,
                isMoreControlsShowed: false,
                sortBy: 'PriceMinMax',
                keyword: '',
                sortOptions: [
                    { value: 'PriceMinMax', text: 'Сначала дешевле' },
                    { value: 'PriceMaxMin', text: 'Сначала дороже' },
                ],
            };
        },

Answer 1

More or less like this:

<div class="apartment-search-result" v-for="(item, index) in filtredItems" :key="`apart_${item.id}`">

data() {
  return {

    ...

    inStock: false,

    ...
    
  };
},

...

computed: {
  filtredItems() {
    if (this.inStock) {
      return this.items.filter(ite => item.status === 'inStock');
    }
  },
},

...