Dynamic Component Props

<Faq class="mt48 mt56d" :list="FAQS" :open-title-key="faqTitleKey" />

const FAQS = [
  {
    titleKey: "family-negative",
    component: FaqContents,
    componentProps: { type: "negative" },
  },
  {
    titleKey: "family-positive-autosomal",
    component: FaqContents,
    componentProps: { type: "positive-autosomal" },
  },
  {
    titleKey: "family-positive-xlinked",
    component: FaqContents,
    componentProps: { type: "positive-xlinked" },
  },
];

<!-- FAQ component -->
<div v-for="item in list">
  <component :is="item.component" v-bind="item.componentProps" />
</div>

// FAQ component
export default {
  props: {
    type: {
      type: "negative" | "positive-autosomal" | "positive-xlinked",
      required: true,
    },
  },
};