vue data changed in async function [duplicate]

I have a async function, which adds an attribute to one of my vue data objects. When I use this data object in my template I can't use the added attribute in the async function. Is there a way to reload the data as soon as the new attribute is added?

Here is an example of my problem:

<template>
  <div>
    {{object.attribute}}
    {{object.newAttribute}}
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      object: {attribute: 'foo'},
    }
  }
  created: function() {
    this.createNewAttribute();
  },

  methods: {
    createNewAttribute: function() {
    setTimeout(function() {
      this.object['newAttribute'] = 'boo';
    }, 9000);
    }
  }
}
</script>

In this example only the first attribute 'foo' is rendered. How can I update the template as soon as the seconds attribute is ready?