我正在开发一个Vue.js（版本-2.6.14）应用程序，其中我有一个主题的分层列表。每个主题都可以有子主题，我使用递归组件来呈现嵌套的主题。
每个topic对象的属性之一是showAddChildFormVal，它最初设置为false。每个主题都有一个按钮，单击该按钮时，应该在true和false之间切换showAddChildFormVal的值。
在我的父Vue组件中，我有一个方法toggleAddChildForm，它更新topic对象上的showAddChildFormVal属性。我可以在控制台日志和Vue Devtools中看到属性正在正确更改，但更改没有反映在UI中。
我已经验证了topics数组中的topic对象中的showAddChildFormVal属性正在正确更新。但是，当我尝试在模板中使用表达式{{ topic.showAddChildFormVal }}显示showAddChildFormVal的值时，它并不反映更新后的值。
我也尝试过使用this.$set来显式地通知Vue属性的更改，但它没有解决这个问题。
我不确定为什么showAddChildFormVal属性中的更改没有反映在UI中。我是否遗漏了什么，或者需要采取任何额外的步骤来确保数组对象的正确React？
下面是相关代码的简化版本：

Vue.component('topic-list', {
  props: ['topics'],
  template: `
    <ul>
      <li v-for="topic in topics" :key="topic.id">
        <div>
          <button @click="toggleAddChildForm(topic)">Toggle</button>
        </div>
        {{ topic.showAddChildFormVal }}
        <topic-list :topics="topic.children"></topic-list>
      </li>
    </ul>
  `,
  methods: {
    toggleAddChildForm(topic) {
      this.$emit('toggle-add-child-form', topic);
    }
  }
});

// Parent Vue instance
new Vue({
  el: '#app',
  data: {
    topics: [
      { id: 1, showAddChildFormVal: false },
      { id: 2, parentId: 1, showAddChildFormVal: false },
      { id: 3, parentId: 1, showAddChildFormVal: false }
    ],
    hierarchicalList:[] // map of parent-child, calculated from topics. This is the value passed to child component
  },
  methods: {
    toggleAddChildForm(topic) {
      const topicAsli = this.findTopicById(topic.id);
      this.$set(topicAsli, 'showAddChildFormVal', !topic.showAddChildFormVal);
    },
    findTopicById(topicId) {
      // ...
    }
  }
});

HTML代码是这样的--

<div id="app">
  <topic-list :topics="hierarchicalList"></topic-list>
</div>

我将非常感谢任何关于如何解决此问题的见解或建议，并确保showAddChildFormVal属性中的更改正确地反映在UI中。
提前感谢您的帮助！