Cube.js Client Vue - QueryBuilder component - query prop not reactive

[miguelskeeled]

Describe the bug
When the query prop of the Query Builder component is changed, the properties are not reacting to its changes.

To Reproduce

1. Use the Query Builder component with the query prop defined (with an already and valid query object).
2. Change the query object programmatically instead of using the QueryBuilder functions like setMeasures, setDimensions, etc.
3. Verify that the query prop has changed, however, it didn't trigger the desired changes.

Expected behavior
The query should trigger changes in the other data properties when the prop itself is changed, but it is not happening.

Screenshots

The screenshots above show that the query prop is different from the data properties, having 2 measures in the array, while the measures array itself does not have 2 measures.

I believe the bug is caused by the watch to query prop.

The watch is calling this.copyQueryFromProps() with no parameters. When this method runs, it is defaulting the value of query fields to the initialQuery data variable fields, since the query parameter is empty.

I believe the next snippet would fix this issue:

query: {
      deep: true,
      handler(query) {
        if (!this.meta) {
          // this is ok as if meta has not been loaded by the time query prop has changed,
          // then the promise for loading meta (found in mounted()) will call
          // copyQueryFromProps and will therefore update anyway.
          return;
        }
        this.copyQueryFromProps(query);
      },
    },

Basically, just by sending the new query value to the method, all the properties would become reactive again.

Version:

"dependencies": {
        "@cubejs-client/core": "^0.26.70",
        "@cubejs-client/vue": "^0.26.70",

[vasilev-alex]

hi @miguelskeeled! Thanks for such a descriptive report. We'll fix it shortly.

[miguelskeeled]

No problem, glad I could help and thank you for the quick feedback.