I have a select where I filter tasks on week, month and year and it works fine. But I want to have a buttons next to the select where I can move to the previous or next week (If I'm filtering on week, otherwise month or year). That's where I get stuck.

For now I have this component for my select:

export default base({
    setup() {
        const now = DateTime.local()
        return {
            items: [
                {
                    text: i18n.tc('Current week'),
                    value: now.startOf('week').until(now.endOf('week')),
                },
                {
                    text: i18n.tc('Current month'),
                    value: now.startOf('month').until(now.endOf('month')),
                },
                {
                    text: i18n.tc('Current year'),
                    value: now.startOf('year').until(now.endOf('year')),
                },
            ],
            label: i18n.tc('Period'),
        }
    },
    itemText: 'text',
    itemValue: 'value',
})

I'm importing and using the component in another file where I first in the setup declare:

const dateFilter = ref<string | null>(
    DateTime.local().startOf('month').until(DateTime.local().endOf('month')).toISODate(),
)

I then have this computed:

const filterTasks = computed(() => {
    function filterDate(filterDate: string | null, taskDate: string | null) {
        return filterDate && taskDate ? filterDate > taskDate : false
    }
    return tasks.value.filter(task => {
                if (filterDate(dateFilter.value, task.dateAdd)) {
                    return false
                }
                return task.id
            }),
    )
})

Then in my template where I use my select component:

        <div class="flex gap-2 items-center">
            <duration
                v-model="dateFilter"
                hide-details
            />
            <div>
                <v-btn icon><v-icon> chevron_left </v-icon></v-btn>
                      {{ buttonText }}
                <v-btn icon @click="dateFilter.plus({ weeks: 1 })">
                    <v-icon> chevron_right </v-icon></v-btn>
            </div>
        </div>

I'm just completely lost on where to proceed from now. I'm also thinking that I'm starting off in the wrong way and should change my Select component as well. Maybe move it into the same or create a new one. Someone that can guide me a bit? :)