How to filter computed value with computed value - vuex

Question

<template>
<div>
<q-card
v-for="country in filteredData"
:key="country"
>
<q-card-section>
<div>{{ country.Country }}</div>
</q-card-section>
</q-card>
<q-inner-loading
:showing="summaryDataFetchStatus"
/>
</div>
</template>
<script>
import { useStore } from "vuex";
import { defineComponent, computed, onMounted, watch } from "vue";
export default defineComponent({
name: "CovidSummaryDataComponent",
setup() {
const store = useStore();
onMounted(() => {
store.dispatch("CovidStore/updateCovidSummary");
});
const summaryData = computed(() => store.getters["CovidStore/summaries"]);
const headerInputValue = computed(() => store.getters["CountrySearchBarStore/getSearchBarValue"]);
const summaryDataFetchStatus = computed(() => store.getters["CovidStore/getSummaryDataFetchStatus"]);
const filteredData = computed(() => summaryData.value.filter(country => country.Country.includes(headerInputValue.value)));
return {
filteredData,
summaryData,
headerInputValue ,
summaryDataFetchStatus
};
},
});
</script>
Hi all. I am trying to filter summaryData by headerInputValue but filteredData doesn't return array. It throws TypeError: Cannot read properties of null (reading 'filter') error. If i use v-for="country in summaryData" instead of v-for="country in filteredData" it work properly so it means summaryData is array. Then why i can't use filter on summaryData ?