visua-vue/src/components/accordion/VAccordion.vue

<script setup lang="ts">
import Accordion from 'primevue/accordion';
import VAccordionChild from './VAccordionChild.vue';
import type IVAccordion from './IVAccordion.type.js';
import { ref, watch } from 'vue';

const props = withDefaults(defineProps<IVAccordion>(), {
  value: null,
});

// Define the event emitter for v-model binding
const emit = defineEmits([
  'update:value',
])

// Local reactive value to sync with the parent v-model
const localValue = ref(props.value);

// Watch for external changes to the prop and update localValue accordingly
watch(() => props.value, (newVal) => {
  if(localValue.value !== newVal) {
    localValue.value = newVal;
  }
});

// Watch for internal changes to localValue and emit them to the parent
watch(localValue, (newVal) => {
  if(props.value !== newVal){
    emit('update:value', newVal);
  }
});
</script>

<template>
  <Accordion
    v-model:value="localValue"
    class="p-accordion"
    style="width: 100%;"
    @update:value="emit('update:value', $event)"
  >
    <slot>
      <VAccordionChild/>
    </slot>
  </Accordion>
</template>