How to set the query correctly for dynamic parameter

<ejs-grid ref='grid' id="grid" :data-source="gridSource" :query="query" :allow-paging="true" 
          :showColumnChooser='true' :action-begin="actionBegin"
>
    <e-columns>
        ....
    </e-columns>
</ejs-grid>

data() {
    return {
        current_folder: 0,

        index : 1,
        pageSettings: {
            pageSize: 10,
            pageSizes: ['5','10','25','50','100','All']
        },

        gridSource: new DataManager({
            url: '/mails',
            adaptor: new WebApiAdaptor(),
        }),
        query: new Query().addParams('folder', this.current_folder ),
     }
}

But the issues I have: If I set the query in the data object with this.current_folder in it,
it's not adding the param at all. If i set it fixed it works.

So I tried to use a computed property instead of defining the query in the data attribute
computed: {
   query(){
          return new Query().addParams('folder', this.current_folder );
   }
}

and listen to the change of the item and reload the data
watch:{
    current_folder(newValue){
      this.folder = newValue;
(document.getElementById('grid')).ej2_instances[0].refresh()
    }
}

But here the param is always one behind. For example:
The initial value is 0. It's changed to 50 and the table is reloaded. It loads the data with the value of 0 - not 50. 
Then I change it to 15 and reload it, it adds the param of 50 to it. [Expected 15]
Then I change it to 7  and reload it, it adds the param of 15 to it. [Expected  7]

I also tried the actionBegin event but this only contains this data:
{ 
     isFrozen: false
     name: "beforeFragAppend"
     requestType: "refresh"
     rows: Array[{...},{...},...]
}

So how can I set the query correctly that it's using the correct current value?