axios获取后，{{obj.data}}未显示在vue模板中

Question

我正在尝试使用Laravel 5.6和Vue.js构建轮播。我可以从db和console.log response.data调用数据。它像预期的那样工作。下面的脚本。

<script>
  $(document).ready(function() {
      $("#availability").owlCarousel();
  });

  export default {
    props: {
      areaId: null,
      tutorId: null,
    },
    data () {
      return {
        availability: []
      }
    },

    methods: {
      getAvailability () {
        var that = this;
        axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability').then((response) => {
          console.log(response.data)
          that.availability = response.data;
        });
      }
    },

    mounted () {
      this.getAvailability();
    }
  }
</script>

现在，我希望能够显示

之类的数据。

{{availability.monday_begin}}

，但不显示任何内容，空标签。

当我在响应中添加第二个.data时，请更改

that.availability = response.data;

到

that.availability = response.data.data;

数据对象在vue-dev工具中显示为未定义，并且{{Availability.monday_begin}}引发错误，无法读取未定义的属性。

我还根据我读过的几篇不同的文章，尝试在模板中添加v-if，但没有任何尝试。

感谢您的帮助。