Is my Vue $data empty in a computed?

by Admiral Potato

HTML

<div id="app">
  <div>
    <button @click="replaceArrayManually">
      replaceArrayManually
    </button>
    <button @click="replaceArrayAsync">
      replaceArrayAsync
    </button>
  </div>
  <div>
    <button @click="replaceObjectManually">
      replaceObjectManually
    </button>
    <button @click="replaceObjectAsync">
      replaceObjectAsync
    </button>
  </div>
  <pre>{{
    JSON.stringify(
    {
      arrayTest,
      objectTest
    }, null, '  '
    )
    }}</pre>
</div>
<p>I was hoping to be able to trigger some sort of error when swapping out the values via async, but I guess I can't cause the issue in this context? Perhaps it only happening with vData. :/</p>

CSS

body {
  color: #f00;
  font-family: sans-serif;
}

JavaScript

const app = new Vue({
	el: '#app',
	data: {
  	array: [],
    object: {}
  },
  computed: {
  	arrayTest () {
    	return Object.values(this.array)
    },
  	objectTest () {
    	return Object.entries(this.object)
    }
  },
  methods: {
  	replaceArrayManually () {
	    this.array = [
      	Math.random(),
      	Math.random(),
      	Math.random()
      ]
    },
  	replaceArrayAsync () {
    	setTimeout(
        () => {
          this.array = [
            Math.random(),
            Math.random(),
            Math.random()
          ]
        },
        Math.random() * 500
      )
    },
  	replaceObjectManually () {
	    this.object = {
      	a: Math.random(),
      	b: Math.random(),
      	c: Math.random()
      }
    },
  	replaceObjectAsync () {
    	setTimeout(
        () => {
          this.object = {
            a: Math.random(),
            b: Math.random(),
            c: Math.random()
          }
        },
        Math.random() * 500
      )
    }
  }
})