如何在组件中反应订阅数据绑定？

data() {
  return {
    message: 'Hello World'
  }
}

<template>
  <div>{{ message }}</div>
</template>

<template>
  <input v-model="message" />
</template>

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    message: 'Hello World'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage
    }
  }
})

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}

export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
      this.$emit('message-updated', newMessage)
    }
  }
}

<template>
  <div>
    <child-component v-on:message-updated="updateMessage"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>