Vue автозаполнение с помощью Axios Call в Laravel

Question

Мне кажется, я действительно близок к тому, чтобы получить автозаполнение Vue с работающими axios, но мне все еще не хватает ключевого компонента.

Я проверил это с помощью жестко закодированных тестовых данных, но мне нужно выяснить, как получить мой вызов axios для правильного запроса моего контроллера. Маршрут, установленный в данный момент в вызове axios, попадает в указанную ниже функцию в моем контроллере, но мне нужно знать, на что установить мою переменную $query, чтобы она инициировала вызов базы данных с фактическими значениями, которые вводит пользователь.

Как правильно отправить запрос через axios и вернуть данные на мой this.options в axios?

Лезвие:

<div id="tagApp">
  <multiselect
    v-model="value"
    :options="options"
    :loading="loading"
    :multiple="true"
    :taggable="true"
    @search-change="val => read(val)"
  ></multiselect>
</div>


new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#tagApp",
      data: {
        value: [],
        loading: false,
        options: [],

      },
      methods: {
        read: function(val){
            console.log('searched for', val);
          if (val) {
            this.loading = true;
            this.options = [];

            const self = this;

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

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

Контроллер:

public function searchTags(Request $request)
{

    $query = $request->get('query);

    $data = CampaignTags::where('TAG_DATA', 'LIKE', "%{$query}%")->get();

    return json_encode($data);


}