Get city components

city: {
        template: '#city_template',
        data: function () {
            return {
                cityData: cityData,//城市数据
                selectedOptions:[24,81],//被选中的城市
                list:[],
            }
        },
        mounted: function () {
                this.getCity()
        },
        methods: {
            getCity: function () {
                var self = this
                $.ajax({
                    url:'test.json',
                    success:function (res) {
                        self.$set(self.$data, 'cityData', res)
                    }
                })
            }
        }
    },

A page may have multiple such components. In this case, multiple ajax requests will be requested. In fact, the data is the same. Is there a way to only request asynchronous data once, and then use multiple such components? The same data? I tried defining ajax externally and assigning it to cityData, so the data cannot be updated directly