Updating parent values in Vue.js 3 doesn't work for composite API

July 27, 2023

I’ve the following vue component (based on PrimeVue):

<template lang="pug">
Dialog(:visible="dShow" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" @update:visible="hide()")
  p test
  template(#footer)
    Button(label="Test")
</template>

<script setup>
import { ref, watch, defineEmits } from 'vue'

const emit = defineEmits(['update:show'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const dShow = ref(false)

watch(() => props.show, (newValue) => {
  dShow.value = newValue
})

const hide = () => {
  emit('update:show', false)
}

</script>

My problem is when I click on the close icon of the dialog, the update:visible function (hide) is being called and the update:show event is getting emitted, but the dialog doesn’t disappear. It’s still show… so I assume the parent value isn’t updated correctly. Any idea what I’m doing wrong here?

I embed the component in the parent as following:

<template lang="pug">
Button(icon="icon pi pi-plus" @click="abcdef = true")
test(:show="abcdef")
</template>

<script setup>
import test from 'mydialog.vue'

const abcdef = ref(false)
</script>

>Solution :

Currently, the parent component sets the :show prop, but it does not react to changes. Use v-model for two-way binding, so that the value in the parent component can be updated from the child through update:show events: