Метод Vue вызывается дважды при обращении к $ children

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?