i have a component i want to render when receiving a value (right click on a menu will send the new value based onthe item clicked in) with a dynamic name to avoid sharing same variable.

i have tried a lot on things but i cant figure out what is the issue.

<component :is="supervisionCardComponent"/>

import SupervisionCard from "@/components/supervision/SupervisionCard";

export default {
  name: "VSupDialog",
  components: {
    SupervisionCard,
 }
}
data: () => ({
 supervisionCardComponent: 'SupervisionCard' ,
  }),

watch: {
    id: {
    handler(newValue) {
      console.log('new id', newValue);
      const componentKey = 'SupervisionCard_' + newValue;
    this.$options.components['SupervisionCard'] = componentKey;
    },
    immediate: true, // Trigger the watcher immediately upon component creation
    deep: true // Watch for changes in nested properties of objetKey
  }
},

I’ve tried global import, Kebab case for my dom component…