<template>
  <component :is="config" :optionData="data" />
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';

  const emits = defineEmits(['changeoption']);
  const props = defineProps({
    optionData: {
      type: String,
    },
    config: {
      type: String,
    },
    index: {
      type: Number,
    },
  });
  const data = ref(JSON.parse(props.optionData));
  watch(
    () => data.value,
    (newData) => {
      emits('changeoption', props.index, newData);
    },
    { deep: true },
  );
  watch(
    () => props.optionData,
    (newData) => {
      data.value = JSON.parse(newData);
    },
    { deep: true },
  );
</script>
<style lang="scss" scoped></style>
