I'm trying to use Vue-multiselect as an autocomplete search against a database, but I'm having issues as far as retrieving the query that I'm sending from the axios call.

I'm seeing the value that I'm typing in as 'val' within the function, but when I dump the query from the request in the controller it shows null ( looking at the request, the query param seems to be empty). I'm thinking there's an issue with how I'm sending it perhaps.

Is my function incorrect as far as how I'm sending the query?

Here's the code:

    <div class="form-group col-lg-4">
<h4>Copy Users</h4>
<br>
<multiselect 
    v-model="copyUsers" 
    :options="copyUsersOptions" 
    @search-change="val => searchCopiedUsers(val)"
    :multiple="true" 
    :loading="loading"
    placeholder="Enter user(s) to be copied" 
    label="name"
    track-by="value">
</multiselect>
</div>


loading:false,
copyUsers: [],
copyUsersOptions: [],
searchCopiedUsers: function(val) {
      console.log('searched for', val);
      if (val) {
        this.loading = true;
        this.copyUsersOptions = [];

        let self = this;

        axios.get('users/search',{params: {query: this.val}})
            .then(function (response) {
                self.options = response.data;
        });

      } else {
        this.options = [];
      }
},

controller.php

public function getUsers(Request $request)
{
    dd($request->get('query'));
}