在vue方法中使用vue-apollo查询结果

Question

我在下面的组件上声明了一个阿波罗查询。

我遇到的问题是，components变量在模板中有数据，但在mounted或getComponents方法中没有数据。

当前，我只能在第二次单击后在控制台中看到数据，而如何才能在第一次单击按钮时获取我的数据？

<template>
  <button class="rd-body-box" @click="getComponents">
    Get Components
  </button>
  {{ components }}
</template>

export default {
  data: {
    return {
      components: {}
    }
  },
  apollo: {
    components: {
      query: gql`
        {
          components {
            id
            created_at
            created_by_id
            updated_at
            modified_by_id
            is_master
            name
            alias
          }
        }
      `,
      update: function(data) {
        let componentByIds = {};
        _.forEach(data.components || [], function(component) {
          let item = {
            id: component.id,
            createdAt: component.created_at,
            createdById: component.created_by_id,
            updatedAt: component.updated_at,
            modifiedById: component.modified_by_id,
            isMaster: component.is_master,
            name: component.name,
            alias: component.alias
          };
          componentByIds[item.id] = item;
        });
        return componentByIds;
      }
    }
  },
  mounted() {
    console.log(this.components); //empty object
  },
  methods: {
    getComponents() {
      console.log(this.components); //first click => empty object, second click gets the data
    }
  }
}