How do I apply a filter to refine results when creating a custom widget in Vue?

I have created a custom component and I’m using vue2-daterange-picker to select ranges of dates, but my biggest challenge is filtering based on start and end of a specific attribute say - date (as a unix timestamp)

I know about ais-numeric-menu but for some reasons, i couldn’t use it

right now, this.state.refine(facesetValue) only requires a single single argument, but i want to do something like a filter example

this.state.refine(value, {
  filter: "attribute:value AND | OR | NOT attribute:value",

Then i inspect my networks and i already see that my createdAtUnix is already added with the value i provided, how do i add a filter here?

I couldn’t copy the entire vue component, i kept on getting 403 but this is what I’m doing

import DateRangePicker from "vue2-daterange-picker";
import { createWidgetMixin } from "vue-instantsearch";
import { connectMenu } from "instantsearch.js/es/connectors";

export default {
    mixins: [createWidgetMixin({ connector: connectMenu })],
    components: {
    computed: {
        widgetParams() {
            return {
                attribute: "createdAtUnix",
        dateRange: {
            get() {
                return {
                    startDate: null,
                    endDate: null,
            set(value) {
                const { startDate, endDate } = value;
                // convert startDate to unix timestamp before refining
                this.state.refine((startDate.getTime() / 1000).toString());

How can I pragmatically search for & filter items?