[Vue]親コンポーネントの変数が変更されたのをトリガーに子コンポーネントを再度レンダリングする方法

Question

聞きたいこと

Vue初心者です。Reactだと、親コンポーネント(Aとする)でstateの値を子コンポーネント(Bとする)にpropsで引き渡していると、Aのstateが変更された段階でBが再度renderされると思います。

Vueでも上記の様なことを実現したいと思っているのですが、現在実現できておらず、何が原因でできていないのか聞きたいです。

実現したいこと

親コンポーネントから子コンポーネントであるモーダルを表示したいと思っています。
index.vueが親、Modal.vueが子です。

• index.vue

<template>
  <div>
    <el-button type="text" @click="handleDialogVisible">モーダルを開く</el-button>
    <Modal :visible=visible></Modal>
  </div>
</template>

<script>
import Modal from '../components/Modal';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleDialogVisible() {
      this.visible = true;
    }
  }
}
</script>

• Modal

<template>
  <div>
    <el-dialog title="Tips" :visible.sync="localVisible" width="30%">
      <span>Modal</span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: [ 'visible' ],
    data() {
      return {
        localVisible: this.visible
      }
    },
  }
</script>

わかっていること

• 親コンポーネントから引き渡されているvisibleの値はtrue、子コンポーネントのdataに存在しているlocalVisibleはfalseのままであること(下記GIF参照)

GIF

Answer 1

意図から反してしまっているかもしれないのですが...
data を介してしまうと created されたときの visible の値で固定されてしまいます。

localVisible を使わず、
そのまま props で与えられた visible を使えば良いのではないでしょうか？

<template>
  <div>
    <el-dialog title="Tips" :visible.sync="visible" width="30%">
      <span>Modal</span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: [ 'visible' ],
  }
</script>

あるいは visible から計算した値を使いたい場合は
computed あるいは methods で
定義した関数を参照するようにすれば良いかな... と思ったりします。