Endless server query loop

[EmileBoon]

Hi

I've tried everything and I've searched everywhere, this is a weird bug I can't get a handle on.

I have a messages model, with an abbreviated structure as follows (just showing some relevant properties):

static get jsonSchema() {
    return {
      type: 'object',
      required: ['action_id'],

      properties: {
        id: { type: 'string' },
        action_id: { type: 'string' },
        message: { type: ['object', 'null'] },
        data: { type: 'object' },
      }
    };
  }

The data property is a JSONB column in Postgres DB. It contains Record<string,any> data types.

I'm trying to filter based on properties in the data property:

makeFindMixin({
  service: "messages",
  name: "mapMessages",
  queryWhen: "fetchMessages",
  watch: true,
}),
mapMessagesParams() {
      let query = {
        action_id: {
          $in: this.actionLayers,
        },
        $limit: this.mapMessageLimit,
        $sort: {
          created_at: -1,
        },
        ...this.localDataFilter
      }

      if (!this.datePicker && this.dateFilter) {
        query.created_at = {
          $gte: this.dateFilter,
        };
      }

      return { query: query }
    },
    mapMessagesFetchParams() {
      let query = {
        action_id: {
          $in: this.actionLayers,
        },
        $limit: this.mapMessageLimit,
        $sort: {
          created_at: -1,
        },
        $eager: "[action.[elaborator]]",
        ...this.fetchDataFilter
      }

      if (this.dateFilter) {
        query["messages.created_at"] = {
          $gte: this.dateFilter,
        };
      }

      return { query: query, debounce: 1000 }
    }

The localDataFilter and fetchDataFilter contain the query data such as:

presets: [
      { name: 'Vehicle Lookouts', query: { 
          action_id: 'aa6ae698-511c-4cf4-b6b1-aea587fb1ecf', 
          localFilter: { 'data.lookout': 'Vehicle' },
          fetchFilter: { data: { lookout: 'Vehicle' } }
        }
      },
      { name: 'Person Lookouts', query: { 
          action_id: 'aa6ae698-511c-4cf4-b6b1-aea587fb1ecf', 
          localFilter: { 'data.lookout': 'Person' },
          fetchFilter: { data: { lookout: 'Person' } }
        }
      }
    ],

Note that I split the filters to see what happens when I change the format of the local one to find one that works.
The data fetched is properly filtered, so the fetchFilter works just fine.

Now here's the weird bit, when I trigger the query by changing the data filter, it starts querying the database in endless loop, it just keeps sending the query to the server infinitely.
When I comment out the ...this.localDataFilter in the local params object and trigger the query, it executes once to server, returns the correct data but of course is not filtered correctly locally by feathers-vuex.

So somehow that query property of { 'data.lookout': 'Person' } makes the query endlessly loop.
It does exactly the same for { data: { lookout: 'Person' } }, I just tried both ways to see if the formatting of the query was an issue.

Anyone want to take a stab at what the hell is going on here?!
Would appreciate some help, I'm losing my mind!