Vue.js-向对象数组添加反应性。与本地json一起使用。从API提取时不起作用

Question

我从Smashing Magazine的一篇帖子中获得启发，该帖子涉及用Vue替换jQuery。我在WordPress主题中替换了jQuery驱动的模态，表单，平滑滚动等，并对结果感到满意！

我正在使用导航菜单，可以使用Vue，axios和WordPress REST API轻松地重新创建导航菜单。

问题是我正在尝试重新创建活动状态以切换移动设备上的子菜单。我正在尝试为每个对象添加反应性属性“ active”：false。

如果我从API复制json响应，然后绕过axios.get（）将其本地粘贴到我的navItems数组中，则可以::

但是当我从API获取该json时，它不起作用：（

知道我在做什么错吗？

CodePen链接：

Non working example - fetching menu items via API

Working example - menu items stored in local array

this.$nextTick(function () {
  for (let i = 0; i < this.navItems.length; i++) {
    Vue.set(this.navItems[i], 'active', false)
  }
})