如何在App.vue中使用vue v-if，但在组件中切换按钮？

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <component-a v-if="showComponentA" />
    <component-b v-else />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showComponentA: true
    }
  },
  methods: {
    toggleComponent() {
      this.showComponentA = !this.showComponentA
    }
  }
}
</script>

<template>
  <div>
    <h1>组件A</h1>
    <!-- 组件A的内容 -->
  </div>
</template>

<script>
export default {
  // 组件A的逻辑
}
</script>