vuejs send required props to dynamic component

<template>
  <div>
    <!-- Parent component -->
    <component :is="dynamicComponent" :prop1="value1" :prop2="value2" />
  </div>
</template>

<script>
import DynamicComponentA from '@/components/DynamicComponentA.vue';
import DynamicComponentB from '@/components/DynamicComponentB.vue';

export default {
  data() {
    return {
      dynamicComponent: 'DynamicComponentA', // Set the default dynamic component
      value1: 'PropValue1',
      value2: 'PropValue2',
    };
  },
  watch: {
    dynamicComponent(newComponent) {
      // Update props when the dynamic component changes
      if (newComponent === 'DynamicComponentA') {
        this.value1 = 'NewPropValue1A';
        this.value2 = 'NewPropValue2A';
      } else if (newComponent === 'DynamicComponentB') {
        this.value1 = 'NewPropValue1B';
        this.value2 = 'NewPropValue2B';
      }
    },
  },
  components: {
    DynamicComponentA,
    DynamicComponentB,
  },
};
</script>

<!-- DynamicComponentA.vue -->
<template>
  <div>
    <!-- DynamicComponentA template -->
    <p>{{ prop1 }}</p>
    <p>{{ prop2 }}</p>
  </div>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      required: true,
    },
    prop2: {
      type: String,
      required: true,
    },
  },
};
</script>

<!-- DynamicComponentB.vue -->
<template>
  <div>
    <!-- DynamicComponentB template -->
    <p>{{ prop1 }}</p>
    <p>{{ prop2 }}</p>
  </div>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      required: true,
    },
    prop2: {
      type: String,
      required: true,
    },
  },
};
</script>