How to get an array object before computed() runs?

Question

JavaScript

I ran into a rendering error problem, I get an object with a bunch of arrays from the json server, but an error occurs at the stage when I need to output it to the template.

Here is my code:

input(type='text'  v-model="searchString")
.reports
  .reports__item(v-for='report in reportsFilters')

let reportsApp = new Vue({
    el: reportsEl,
    data: {
      searchString: '',
      reports: {},
    },
    methods: {
      getReportsArr() {
        let axiosUrl = this.$el.getAttribute('data-xhr');

        axios.get(axiosUrl).then(response => {
          let data = response.data;

          for (let i = 0; i < data.length; i++) {
            let reportsArr = data[i].reportsList;

            this.reports = reportsArr;
          }
        }).catch(e => {
          this.errors.push(e);
        })
      }
    },
    beforeMount() {
      this.getReportsArr();
    },
    computed: {
      reportsFilters() {
        let self=this;

        return this.reports.filter((report) => {
              return report.reportName.toLowerCase().indexOf(self.searchString.toLowerCase())>=0;
              });
      }
    }
  })

Answer 1

When initialized in data.reports an empty object, it does not have a filter method called in computed.reportsFilter. Should be an empty array