Push not updating array in DOM Vue

To add an item to the back of an array and get it to be reactive in Vue, below is what worked for me:

this.$set(this.items,           this.items.length,           JSON.parse(JSON.stringify(this.item))         );

The this.$set is Vue's inbuilt array manipulation function that guarantees reactivity.The this.items is the array, this.items.length (NOTE: it is items.length NOT items.length - 1) is to push a new index to the back of the array and finally, JSON.parse(JSON.stringify(this.item)) is to clone the this.item into a new object before pushing into the array. The cloning part may not be applicable to you and I used this in variables because all the variables are declared in my data() function.

Use a computed property in your component and use that for parsing the template like this

<li v-for="(data,index) in availSearch" :key="index">  <a href="#">{{data.name}}</a></li>

and computed property will be then

availSearch() {  return this.availSearchData;},

so this computed property always return the array if it is updated.

Also if your response is the array that you want to use exactly, try this

searching() {  if (this.input) {    let url = this.domain + "search";    axios    .get(url, {      params: {        table: this.table,        data: this.input      }    })    .then(res => {      this.availSearchData = [];      Vue.set(this, 'availSearchData', res.data);    });  }}

Try calling your function from mounted hook. I think the problem is that you are trying to show data when the DOM is not rendered yet. By calling your function in mounted you get data back after DOM has been rendered.

mounted() {     this.searching();          }

from Vue website "mounted: Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called."