Визуализация списка на основе общего свойства во Vue

Я хотел бы отобразить список компонентов в зависимости от того, относится ли свойство type к определенному типу. Например, если resource.type === 'article' отобразить все ресурсы с типом article и т. Д.

Мой массив ресурсов выглядит так

Я создал компонент, который по сути представляет собой просто представление.

<template>
   <div class="type-feed">
       <resource-card></resource-card>
   </div>
</template>

<script>

import Vue from 'vue';
import VueFire from 'vuefire';
import ResourceCard from '../components/ResourceCard'

var resourcesRef = firebase.database().ref('resources');

// explicit installation required in module environments
Vue.use(VueFire);

export default {
    name: 'type-view',
    components: {
      ResourceCard
    },
    data () {
        return {

        }
    },
    firebase: {
        resources: resourcesRef
    }
}

</script>

<style>

</style>

Компонент <resource-card> должен принимать список и отображать конкретную информацию об отдельном объекте ресурса. Что-то вроде следующего

<resource-card v-for="(resource, index) in resources" :resource="resource>

У меня вопрос: как лучше всего отобразить список с помощью resources.type?