如何调用一次ajax请求在多个组件实例中加载数据

// 原生JavaScript实现
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 更新组件数据
    var components = document.getElementsByClassName('my-component');
    for (var i = 0; i < components.length; i++) {
      components[i].innerText = data;
    }
  }
};
xhr.send();

// Vue.js实现
var app = new Vue({
  el: '#app',
  data: {
    componentsData: ''
  },
  mounted: function() {
    this.loadData();
  },
  methods: {
    loadData: function() {
      var self = this;
      axios.get('https://api.example.com/data')
        .then(function(response) {
          self.componentsData = response.data;
        })
        .catch(function(error) {
          console.error(error);
        });
    }
  }
});