使用 vuex 显示过滤列表

有这么一个小项目：codesandbox

帖子列表并选择过滤器。

家.vue：

<b-form-select v-model="selected" :options="options"></b-form-select>

<ul v-for="post in getPostsFilter" :key="post.id">
  <li>
    {{ post.id }}
    {{ post.completed }}

     <b-form-checkbox v-model="post.completed">
        I accept the terms and use
     </b-form-checkbox>

    {{ post.title }}
  </li>
</ul>


import { mapActions, mapGetters } from "vuex";

export default {
  name: "Home",
  components: {
    DefaultLayout,
  },
  data() {
    return {
      selected: this.$store.state.selected,
      options: [
        {
          value: "all",
          text: "All",
        },
        {
          value: "completed",
          text: "Completed",
        },
        {
          value: "not_completed",
          text: "Not completed",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["getPostsFilter"]),
  },
  methods: {
    ...mapActions(["fetchPosts"]),
  },
  mounted() {
    this.fetchPosts();
  },
};
</script>

商店.js：

export default new Vuex.Store({
  state: {
    posts: [],
    selected: "all"
  },
  getters: {
    getPosts(state) {
      return state.posts;
    },
    getPostsFilter(state) {
      if (state.selected === "all") {
        return state.posts;
      }

      if (state.selected === "completed") {
        return state.posts.filter((p) => (p = p.completed));
      }

      if (state.selected === "not_completed") {
        return state.posts.filter((p) => (p = !p.completed));
      }
    }
  },
  mutations: {
    setPosts(state, payload) {
      state.posts = payload;
    }
  },
  actions: {
    async fetchPosts({ commit, dispatch }) {
      axios
        .get(" https://jsonplaceholder.typicode.com/todos/?_limit=3")
        .then((response) => {
          this.commit("setPosts", response.data);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
});

问题：在 select completed\not_completed\all 中选择时如何显示过滤列表？