Async Computed in Components?

Computed properties are basically functions that cache their results so that they don’t have to be calculated every time they are needed. They updated automatically based on the reactive values they use.

Your computed does not use any reactive items, so there’s no point in its being a computed. It returns a Promise now (assuming the usual behavior of then).

It’s not entirely clear what you want to achieve, but my best guess is that you should create a data item to hold, and make your api.get call in the created hook. Something like

export default {
  data() {
      return {
        messages: []
  created() {
    api.get(`/users/${this.value.username}/message/`, {
        'headers': {
          'Authorization': 'JWT ...'
      .then(response => this.messages =;

Leave a Comment