Scope VUE JS, call from function to data element?

Question

Vue.js

can't access data element inside function.

<button v-on:click="search_boxes" type="button" class="btn btn-primary btn-lg">

var app = new Vue({
    el: '#app',
    delimiters: ['{%', '%}'],
    data: {
        boxes: [],        // массив с коробками - загружается один раз
    },
    methods: {
    // Обработчик кнопки
      search_boxes: function (event) {
        if(this.boxes.length == 0) {
          this.get_boxes(); // загружаем коробки из БД единожды

          console.log(this);
          console.log(this.boxes.length);
          console.log(this.boxes);
        }
        console.log(this.boxes);
      },
      get_boxes: function () {
        axios.get('/api/get_boxes')
          .then(response => { this.boxes = response.data; })
          .catch(e => { console.log(e); });
        }
    },
});

The get_boxes function works, it is clear that the arrow functions do not have a context.
But how to access this.boxes from the search_boxes function?

console log(this);
console.log(this.boxes.length);
console.log(this.boxes);
Give the root VUE object

Answer 1

data must be a function that returns an object!!!

delimiters: ['{%', '%}'],
 data () {
  return {
      // Служебные переменные
        errors: [],       // массив с ошибками
        alert: '',        // обложка текста с ошибками
        error_length: '', // подсвечивание инпута длина
        // ... остальные св-ва
   }
},
 methods: {
   // ваши методы
}

Answer 2

var app = new Vue({
    el: '#app',
    delimiters: ['{%', '%}'],
    data: function () {
      return {
        boxes: [],        // массив с коробками - загружается один раз
      }
    },
    methods: {
    // Обработчик кнопки
      search_boxes: function (event) {
        if(this.boxes.length == 0) {
          this.get_boxes(); // загружаем коробки из БД единожды

          console.log(this);
          console.log(this.boxes.length);
          console.log(this.boxes);
        }
        console.log(this.boxes);
      },
      get_boxes: function () {
        axios.get('/api/get_boxes')
          .then(response => { this.boxes = response.data; })
          .catch(e => { console.log(e); });
        }
    },
});