Grandchild from sibling A emits, parent updates the value, but sibling B is not updating-CodePudding

This is the parent template with 2 children

<payment :isEditing="isEditing" @action="onActionButtonClick" />
<create-details v-if="isCompanyDetailsCreating" @action="onActionButtonClick" />

Inside the child create-details I have a grandchild that emits onActionButtonClick, it's received by the parent and the parent it changes the value of isEditing.

My problem is that this value change in isEditing, I'm not receiving inside payment component. This is what I have tried inside PaymentComponent, but it's not working

props: {
  isEditing: { type: Boolean as PropType<boolean>, default: false },
},
emits: ['action'],
setup(props, { emit }) {
  const isEditingButton = ref(props.isEditing)

watch(props.isEditing, (first, second) => {
 isEditing.value = props.isEditing
})

The error I'm receiving in the watch warning is this one. Would be great if someone could help me. I know I could achieve it with store, but I would appreciate help.

Argument of type 'boolean' is not assignable to parameter of type 'readonly WatchSource[]'>

CodePudding user response：

Boolean is a type that can be used directly, you only need to to use PropType for more complex types and when using TypeScript.

So try to define the prop like this:

props: {
  isEditing: { type: Boolean, default: false },
},

EDIT: And you can't update a prop, or what is your intention with this line in the watch:
isEditing.value = props.isEditing
Is this a ref you omited in the code?

https://v3.vuejs.org/guide/typescript-support.html#annotating-props