Accessing top-level Vue data in nested getter/setter

<template>
  <div id="app">
    {{ foo.bar }}
    <button @click="meaning++">click</button> <!--not reactive-->
    <button @click="foo.bar++">click2</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  private meaning = 42;

  private foo = {
    that:this,
    get bar() {
      return this.that.meaning;
    },
    set bar(value) {
      this.that.meaning = value;
    },
  };

  created() {
    console.log(this); // VueComponent {}
    console.log(this.foo.that); // App {}
    console.log(this === this.foo.that); // false
  }
}
</script>

I want foo.bar to be backed by meaning which is a top level data field. I start with the hack above to save this (the Vue option instance) in that, but I'm also aware that at run time, this become the VueComponent instance in component methods, thus this.meaning is not this.foo.that.meaning.

An extra problem is that the code snippet above will break vue-devtools inside Chrome. vue-devtools will try invoke Object.keys() on instance._data which is null.

What's the correct way to make foo.bar be backed by meaning? I might be having arbitrarily complicated logic in those getter and setter.

Edit:

Since this to the VueComponent can only be resolved at runtime, I came to this kinda hackish workaround:

<template>
  <div id="app">
    {{ foo.bar }} 
    <button @click="meaning++">click</button>  <!-- reactive now! -->
    <button @click="foo.bar++">click2</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  private meaning = 42;

  private foo = {
    that: {meaning:42} as any, // put exactly the same literal initail value here
    get bar() {
        return this.that.meaning;
    },
    set bar(value) {
      this.that.meaning = value;
    },
  };

  created() {
    this.foo.that = this;
    console.log(this); // VueComponent
    console.log(this.foo.that); // VueComponent
    console.log(this === this.foo.that); // true
  }
}
</script>

Original answer: