问Vue组合Api呈现函数sync emit不起作用

EN

<template>
<!-- eslint-disable-next-line -->
  <tab-container v-model:activeTabId="activeTabId">
    <tab tabId="1">Tab #1</tab>
    <tab tabId="2">Tab #2</tab>
    <tab tabId="3">Tab #3</tab>

    <tab-content tabId="1">Content #1</tab-content>
    <tab-content tabId="2">Content #2</tab-content>
    <tab-content tabId="3">Content #3</tab-content>
  </tab-container>
</template>

<script>
import {ref} from 'vue'
import {Tab, TabContent, TabContainer} from './components/tabs.js';

export default {
  components: {
    Tab, 
    TabContent,
    TabContainer
  },
  setup() {
    const activeTabId = ref('1');

    return {
      activeTabId,
    };
  },
};
</script>

import { h } from "vue";

export const TabContainer = {
  props: {
    activeTabId: {
      type: String,
      required: true,
    },
  },
  emits: ['update:activeTabId'],
  setup(props, context) {
    const $slots = context.slots.default();
    const tabs = $slots
      .filter((x) => x.type === Tab)
      .map((tab) =>
        h(tab, {
          class: {
            tab: true,
            active: props.activeTabId === tab.props.tabId,
          },
          onClick: () => {
            console.log(tab.props.tabId)
            context.emit("update:activeTabId", tab.props.tabId);
          },
        })
      );

    const content = $slots.find(
      (slot) =>
        slot.props.tabId === props.activeTabId && slot.type === TabContent
    );

    return () => [
      h(() => h("div", { class: "tabs" }, tabs)), 
      h(() => h("div", content))
    ];
  },
};

const tabItem = (content) => ({
  ...content,
  props: {
    tabId: {
      type: String,
      required: true,
    },
  },
  setup(_, context) {
    return () => h("div", context.slots.default())
  }
});

export const Tab = tabItem({ name: "Tab" });
export const TabContent = tabItem({ name: "TabContent" });