引用$ children时，Vue方法被调用两次

Question

我正在构建一个选项卡小部件，但遇到一个问题，当我将testFn()组件分配给$children数据属性时，两次调用tabs。不知道是什么原因造成的。

我有一个看起来像这样的父组件：

mounted() {
    this.tabs = this.$children;
  },
 methods: {
    testFn(i) {
      console.log("fn called" + i);
    },
}

父组件的模板：

<ul>
   <li v-for="(tab, index) in tabs")>..test..</li>
</ul>

<AppUiButton @click="testFn(selectedTab + 1)"> Test </AppUiButton>

testFn()由于某种原因被两次调用。

但是，这可以按预期工作：

mounted() {
    // this.tabs = this.$children;
  },

为什么我将$ this.tabs分配给$ children的事实会改变@click的行为？