Tengo estas propiedades calculadas en un componente:

 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]) } } }

Esto funciona en la actualización del navegador. Como puede ver es un poco repetitivo (Hay algunos más en otros componentes).

Traté de crearlos dinámicamente así:

 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]) } } } }) }

Pero no funciona en la actualización del navegador. me sale el error:

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

Funciona al cambiar componentes (estoy usando el enrutador Vue)

¿Cómo puedo hacer que esto, o algo similar, funcione? En última instancia, quería ponerlo en una mezcla para reutilizarlo en otros componentes.