JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <p v-for="(item, index) in items">
    <span v-text="item.title"></span>
    <a href="#" v-on:click.prevent="deleteObject(index)">&times;</a>
  </p>
  <p v-for="(item, index) in anoArray['test']">
    <span v-text="item + ' index'"></span>
    <a href="#" v-on:click.prevent="deleteArray(index)">&times;</a>
  </p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    anArray: ['A','B','C','D'],
    anoArray:[],
    items: {
      '1': {
        id: 1,
        title: 'item 1'
      },
      '2': {
        id: 2,
        title: 'item 2'
      },
      '3': {
        id: 3,
        title: 'item 3'
      },
      '4': {
        id: 4,
        title: 'item 4'
      }
    }
  },
  methods: {
    deleteObject: function(index) {
      this.$delete(this.items, index);
    },
    deleteArray: function(index) {
    	console.log('testaaa');
      this.$delete(this.anoArray['test'], 1)
      //this.$delete(this.anoArray['test'], index);
    },
    addArray: function(index) {
      this.$delete(this.anoArray, index);
    }
  },
  created: function () {
  	this.anoArray['test'] = ['b','n','s'];
    console.log("aaa");
    //console.log(anoArray);
  }
});