Как я могу визуализировать состояние Vuex в зависимости от срабатывания функции?

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

Дело в следующем. У меня есть состояние "allCountries", которое представляет собой массив и изначально заполнено объектами 250 стран. Я правильно отображаю эти страны в своем домашнем компоненте, дело в том, что я хочу фильтровать при нажатии кнопки страны для континента, который представляет кнопка. Например, если на кнопке написано «Европа», я хочу получить все страны, где свойство «континент» — Европа.

Я достиг этого с помощью следующего кода:

const store = createStore({
state: {
    allCountries: [],
    filteredCountries: [],
    countryId: {},
},

mutations: {

    filterByContinent(state, payload) {
        let countries = [...state.allCountries];
        state.filteredCountries = countries.filter(
            (country) => country.continent === payload
        );
    },
},

Проблема в том, что я не знаю, как отобразить отфильтрованные страны при нажатии кнопки, в инструментах vuex dev я вижу, как состояние "filteredCountries" заполняется правильными странами континента при нажатии.

Я пробовал это, но не работает:

<template>
<div>
    <!-- <p class="homeTitle">COUNTRIES:</p> -->
    <ul class="countriesBox" v-if="allCountries">
        <li
            v-for="country in allCountries"
            :key="country.id"
            class="countryCard"
        >
            <br />
            <router-link
                :to="{
                    name: 'CountryDetail',
                    params: { id: country.Id },
                }"
                class="countryName"
                >{{ country.name }}</router-link
            >
            <br />
            <p class="countryContinent">{{ country.continent }}</p>
            <br />
            <img
                :src="`${country.flagImage}`"
                alt="country flag"
                class="flagImage"
            />
        </li>
    </ul>

    <ul class="countriesBox" v-else-if="filteredCountries">
        <li
            v-for="country in filteredCountries"
            :key="country.id"
            class="countryCard"
        >
            <br />
            <router-link
                :to="{
                    name: 'CountryDetail',
                    params: { id: country.Id },
                }"
                class="countryName"
                >{{ country.name }}</router-link
            >
            <br />
            <p class="countryContinent">{{ country.continent }}</p>
            <br />
            <img
                :src="`${country.flagImage}`"
                alt="country flag"
                class="flagImage"
            />
        </li>
    </ul>

    <div class="backAndForwardButtons">
        <button>&#10094;</button>
        <button>&#10095;</button>
    </div>

    <FiltersBar />
</div>
</template>

Я правильно сопоставляю состояния с

import { mapState } from "vuex";
import store from "../store";

export default {
    name: "HomePage",
    computed: {
        ...mapState(["allCountries"]),
        ...mapState(["filteredCountries"]),
    },
};

если кто-то может помочь, буду очень благодарен.