Javascript XHR后双向数据绑定不起作用

我从vuex观看的内容如下：

computed: {
    ticket() {
        return this.$store.getters['order/reservation'].offer_id
    }
},
watch: {
    ticket(newTicketId) {
        console.log('Caught change of ticket in InputDate', newTicketId)
        this.getAvailableDates(newTicketId)
    }
},

对于它的更改，我正在执行getAvailableDates（）。此方法仅使用axios模块执行http请求：

    async getAvailableDates(id) {
        try {
            const response = await this.$axios.$get(
                `/valid_days?offer_id=${id}`
            )
            this.$set(this, 'availableDates', response)
            console.log('this.availableDates', this.availableDates) // works fine showing 30 length array
        } catch (e) {
            console.error('Error getting valid_days', e)
        }
    }
},

（我正在使用nuxt）

正如您所看到的，我已经尝试从vue实例使用$set方法设置它。之前我还尝试了

this.availableDates=response

和

this.$set（this.data'availableDates'，response）

行，其中I console.log来自API的响应工作正常，在控制台中，我看到阵列非常好：

但在vue devtools中，数组为空：

在模板中，我会：

availableDates: {{ availableDates }}

它也不会得到更新

---

在我与Vue的2年旅程中，从未有过这样的经历。当我的反应性出现问题时，$set一直在工作。有人知道可能的原因吗？

我不确定nuxt是否不同，但是$set的Vue文档有一个警告

警告:

目标对象不能是Vue实例或的根数据对象 Vue实例

正如Boussadjra Brahim评论的那样，您可以使用

this.availableDates= response

---

如果availableDates已经是现有的数据属性$set仅在向对象添加新属性时使用，并且需要保持反应性。

我不确定nuxt是否不同，但$set的Vue文档有一个警告

警告:

目标对象不能是Vue实例或的根数据对象 Vue实例

正如Boussadjra Brahim评论的那样，您可以使用

this.availableDates= response

---

如果availableDates已经是现有的数据属性$set仅在向对象添加新属性时使用，并且需要保持反应性。

$set

用于更新数据数组中给定索引处的项目，我认为您可以像这样直接分配该数据。availableDates=response

$set

也可以用于设置对象的属性。正如您在docs

Vue.set（对象、属性名称、值）

中看到的那样。除此之外，我已经尝试了直接分配，但它的工作效果不如我在问题中提到的

$set

方法。您是否尝试不使用

asyn/wait

，我的意思是使用

axios.get（）。然后。catch（）

您不应该在getter上使用计算属性，这是一种浪费。。。这就像在计算属性上使用计算属性如何以其他方式查看组件中的存储更改？

$set

用于更新数据数组中给定索引处的项，我认为您可以像这样直接分配该数据。availableDates=response

$set

也可以用于设置对象的属性。正如您在docs

Vue.set（对象、属性名称、值）

中看到的那样。除此之外，我已经尝试了直接分配，但它的工作效果不如我在问题中提到的

$set

方法。您是否尝试不使用

asyn/wait

，我的意思是使用

axios.get（）。然后。catch（）

您不应该在getter上使用计算属性，这是一种浪费。。。这就像在计算属性上使用计算属性如何以其他方式查看存储更改？