I have these computed properties in a component:

computed: {
  messageText: {
    get() {
      return this.getMessageProp('messageText') // Maps to a vuex getter
    },
    set(value) {
      this.setMessageProp(['messageText', value]) // Maps to a vuex mutation
    }
  },
  location: {
    get() {
      return this.getMessageProp('location')
    },
    set(value) {
      this.setMessageProp(['location', value])
    }
  }
}

This works on browser refresh. As you can see it's a bit repetitive (There are a few more in other components).

I tried to create them dynamically like this:

data() {
  return {
    stepProps: {
      messageText: {},
      location: {},
    }
  }
},
created() {
  Object.keys(this.stepProps).forEach((key) => {
    if (!this.$options.computed[key]) {
      this.$options.computed[key] = {
        get() {
          return this.getMessageProp(key)
        },
        set(value) {
          this.setMessageProp([key, value])
        }
      }
    }
  })
}

But it does not work on browser refresh. I get the error:

Property or method "messageText" is not defined on the instance but referenced during render....

It works when switching components (I am using Vue router)

How can I get this, or something similar, to work? Ultimately I wanted to put it into a mixin to reuse in other components.