Vue.jsにおけるV-forの条件付けについて

前提

Vue.jsでアプリを作成しており，行き詰ったため質問しています．

実現したいこと

完了ボードのカードコンポーネントの表示において，納期と現在の日付を参照して，日付の差分によってv-forで表示するデータに制限をかける機能を実装したい

納期= order_due_date
期日＝現在の日付

該当のソースコード

html

<template> <SwitchToggle /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <div class="boardArea"> <div class="board green"> <p class="boardText">完了</p> <div class="cardArea"> <router-link v-for="data in completionCardData | filterBy diffDateJudge ==true" :key="data" :to="{ name: 'Detail', query: { order: data.order.id } }" > <Card :customer-name="data.customer.name" :order-due-date="data.order.order_due_date" :product-number="data.product.number" :product-name="data.product.name" :product-quantity="data.product.quantity" :process-name="data.process.name" > </Card> </router-link> </div> </div> </div></template>

javascript

import axios from 'axios'import Card from '../components/calendar_1day_card.vue'import SwitchToggle from '../components/SwitchToggle.vue'import moment from 'moment' export default { name: 'Kanban', components: { Card, SwitchToggle, }, filters: { moment: function (date) { return moment(date).format('YY/MM/DD HH:mm') }, }, data() { return { cardData: [], errorMsg: '', unfinishedCardData: [], workingCardData: [], completionCardData: [], } }, computed: { completionCardDataSort() { return this.completionCardData.slice().sort((a, b) => { // 納期が早い順に並び替え if (a.order.order_due_date !== b.order.order_due_date) return a.order.order_due_date < b.order.order_due_date ? -1 : a.order.order_due_date > b.order.order_due_date ? 1 : 0 // 受注番号が小さい順に並び替え if (a.order.id !== b.order.id) return a.order.id - b.order.id // 作業番号が小さい順に並び替え if (a.job_number !== b.job_number) return a.job_number - b.job_number }) }, completionCardData: function (order_due_date, today) { return moment(order_due_date).diff(today, 'days') < 7 } }, created() { axios .get(process.env.VUE_APP_API_SERVER_URL + '/v1/calendar/', { params: { worker: this.$route.query.worker, }, }) .then((response) => { console.log(response.data) this.cardData = response.data this.ArrayFilter() }) .catch((error) => { console.log(error) this.errorMsg = 'Error retrieving data' }) }, methods: { ArrayFilter: function () { this.unfinishedCardData = this.cardData.filter(function (num) { return num.status.id == 1 }) this.workingCardData = this.cardData.filter(function (num) { return num.status.id == 2 || num.status.id == 3 }) this.completionCardData = this.cardData.filter(function (num) { return num.status.id == 4 }) }, // 日付の差分でtrueを返す diffDateJudge: function (order_due_date, today) { if (moment(order_due_date).diff(today, 'days') < 7) { return true } }, },}</script>

試したこと

filterやv-ifの使用を試しましたが，どのように実装するのが一番いいのかわからない状況です．
どなたかご回答いただけたら幸いです．

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。