VueJS:动态组件在重新加载后失去其道具

<template>
  <div>
    <component :is="currentComponent" :key="componentKey"></component>
    <button @click="reloadComponent">重新加载组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      componentKey: 1
    };
  },
  methods: {
    reloadComponent() {
      // 切换组件并更新key值
      if (this.currentComponent === 'ComponentA') {
        this.currentComponent = 'ComponentB';
      } else {
        this.currentComponent = 'ComponentA';
      }
      this.componentKey += 1;
    }
  }
};
</script>