дочерний компонент не обновляется, когда prop (boolean) изменяется родительским компонентом

Question

Когда я изменяю значение props (Boolean) в родительском компоненте Vue, дочерний компонент не будет обновляться, чтобы запустить модальное открытие.

В моем родительском компоненте событие click устанавливаетзначение openModal от ложного до истинного.Это значение затем передается через опору дочернему компоненту.В этом дочернем компоненте обновленное логическое значение должно затем добавить класс через привязку класса к div, который в свою очередь открывает модальный тип.

Родительский компонент:

<FilmListItem
      v-for="slice in slices"
      @click.native="openModal=true"
    />

<child-component :modal="openModal">
...

data() {
  return {
    openModal: false
  }
}

Дочерний компонент:

<div
    class="modal__container"
    :class="{ 'modal--show': showModal }">
...
export default {
  props: {
    modal: Boolean
  },
  data() {
    return {
      showModal: this.modal
    }

In the vue dev tools I can see, that the value of the prop changes in the parent. Yet, my child component doesn't update. It worked when I forced the child component to reload when I was assigning a new :key value together with changing the Boolean. But that feels a little hacky to me. Also, a watcher within the child component didn't do the trick. It simply wouldn't watch the changed prop value. Any ideas very much appreciated. Thanks in advance.

Answer 1

Я на самом деле сам нашел решение, а теперь:

В дочернем компоненте я пытался получить доступ к данным реквизита через объект данных. Но я просто получил доступ к данным реквизита так:

<div   
  :class="{ 'modal--show': modal }"> 
...

export default {   
  props: {
    modal: Boolean 
  } 
}