捕获类型错误：setActivePopup 不是函数 Vue3 + Silver Stripe 4

Question

我试图将我的代码从 vue2 迁移到 vue3 我遇到了这个错误，我正在寻找修复它的方法。我只是在学习迁移，我公开征求意见，非常感谢您的帮助！

捕获类型错误：setActivePopup 不是一个函数 在评估（在 compileToFunction 评估（vue.esm-bundler.js:65:1），:204:43） 在 renderFnWithContext (runtime-core.esm-bundler.js:868:1) 在 renderSlot (runtime-core.esm-bundler.js:3025:1) 在 Proxy.render (LanguageSelector.vue:2:3) 在 renderComponentRoot (runtime-core.esm-bundler.js:914:1) 在 ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:1) 在 ReactiveEffect.run (reactivity.esm-bundler.js:190:1) 在 instance.update (runtime-core.esm-bundler.js:5763:1) 在 setupRenderEffect (runtime-core.esm-bundler.js:5777:1) 在 mountComponent (runtime-core.esm-bundler.js:5559:1) e

Parent：这是我尝试调用 LanguageSelector.vue（组件）的地方

<language-selector>
        <div class="language-selector__overlay"
             v-show="setActivePopup()"
             :aria-hidden="!setActivePopup()"> <%-- v-cloak --%>
        </div>

        <div class="language-selector__popup-wrapper"> <%-- v-cloak --%>
            <focus-trap
                ref="focusTrap"
                :value="setActivePopup()">
                <div
                    class="language-selector__popup"
                    @keydown.esc.prevent="closePopup()"
                    :open="setActivePopup()"
                    v-show="setActivePopup()"
                    :aria-hidden="!setActivePopup()">
                    <% include LanguageSelector %>
                </div>
            </focus-trap>
        </div>
    </div>
</language-selector>

语言选择器.vue

<template>
  <slot></slot>
</template>


<script>
  import { FocusTrap } from 'focus-trap-vue';
  import SwipeTrap from "../mixins/SwipeTrap";

  export default {
    name: 'language-selector',
    mixins: [
      SwipeTrap,
    ],
    components: {
      // eslint-disable-next-line vue/no-unused-components
      'focus-trap': FocusTrap
    },
    data() {
      return {
        activePopup: null,
      };
    },
    computed: {
      setActivePopup() {
        return this.activePopup;
      }
    },
    methods: {
      togglePopup() {
        this.activePopup = !this.activePopup;
      },
      closePopup() {
        this.activePopup = false;

        // Remove styles for open menu
        const closeButton = document.getElementsByClassName('');
        for (let i = 0; i < closeButton.length; i += 1) {
          const aButton = closeButton[i];
          aButton.classList.remove('language-selector__button--open');
        }

        // Remove active styles and event listener from overlay
        const overlays = document.getElementsByClassName('language-selector__overlay');
        for (let i = 0; i < overlays.length; i += 1) {
          const overlay = overlays[i];
          overlay.classList.remove('language-selector__overlay--active');
          overlay.removeEventListener('click', this.closePopup);
        }
      },
      openPopup() {
        this.activePopup = true;

        // Apply styles for open menu
        const closeButton = document.getElementsByClassName('language-selector__button');
        for (let i = 0; i < closeButton.length; i += 1) {
          const aButton = closeButton[i];
          aButton.classList.add('language-selector__button--open');
        }

        // Apply active styles and event listener to overlay
        const overlays = document.getElementsByClassName('language-selector__overlay');
        for (let i = 0; i < overlays.length; i += 1) {
          const overlay = overlays[i];
          overlay.classList.add('language-selector__overlay--active');
          overlay.addEventListener('click', this.closePopup);
        }

        // Focus heading element on open
        this.$nextTick(() => {
          const langSelectorMobile = '.header__lang-selector--mobile';
          const langSelectorDesktop = '.header__lang-selector';
          const langSelectorHeader = '.language-selector__header';

          // check if we are viewing this in mobile or desktop
          // assume we are viewing on mobile
          let langSelectorEl = document.querySelector(langSelectorMobile);
          if (!langSelectorEl || window.getComputedStyle(langSelectorEl).display === 'none') {
            // we are viewing on desktop
            langSelectorEl = document.querySelector(langSelectorDesktop);
          }

          // find and focus the header
          const headerEl = langSelectorEl.querySelector(langSelectorHeader);
          headerEl.focus();
        });
      },
    },
  };
</script>

我尝试修复错误，但我无法确定这是从哪里来的。