Vue数据不会被eventHub调用覆盖

Question

我无法弄清楚，为什么data()内的变量不会被覆盖。

代码如下所示：

export default {
  props: ["store", "link", "index", "isStoreOpen"],
  data() {
    return {
      hovered_over_icon: false,
      window_width: window.innerWidth,
      opened: null
    }
  },
  methods: {
    toggleRestaurantView() {
      this.link()
    },
    check_for_breaks(text){
      return text.replace(/\*break\*/g, '<br/>');
    },
    change_state(state){
      this.opened = state
    }
  },
  computed: {
    url() {
      return ((this.store) ? `https://www.google.com/maps/dir/Current+Location/${this.store.address.location.lat},${this.store.address.location.lon}` : '#')
    },
    isOpen() {
      return this.store.openNow;
    }
  },
  created(){
    eventHub.$on('restaurantOpened', (state) => this.change_state(state));
    eventHub.$on('changeFilteredRestaurantsAfterRestaurantVisit', (state) => this.store = state);
  }
}
</script>

但是当我在重新分配新值后记录this.opened时，我得到了正确的值，但是当我检查Vue控制台时，它仍然在null。

即使我this.$forceUpdate()它也没有更新。

到目前为止，在我的Vue职业生涯中从来没有发生这种事，有点困惑。