Computed properties in data?

The below returns testMessage as undefined - actually the whole data object is undefined.

new Vue({
  el: '#app',
  computed: { 
  	test: function () {
    	return 'test'
  data: {
    message: 'Hello Vue.js!',
    testMessage: this.test

The above is a simplified version of what I am experiencing in a larger project, where I use Vuex and inside the computed properties I have the mapGetters object, and I am trying to use one of these values (returned by a getter) inside the data property.

Does anyone have any ideea why this does not work?

I’m guessing it is because this inside the data property refers to the data property and not the whole Vue component -> but then how can I access the computed from the data ()?

Is there a way?

Thank you!


Don’t try to inject computed into data. Computed is already accessible just like data is. Simply use {{ test }} in you template.


@entr is right. Technically, this cannot work because during component creation, the data is evaluated before the computed array, so this.test doesn’t exist yet.

1 Like

I see, thank you!
I will try to find a way around that for my application.

I have the same problem. Please can you tell me how you solve your case ???!!

@entr already provided a solution in the second post - simply use the computed property ({{ test }} in the original case) directly.

the problem is that I use some computed properties from store to create many arrays in data before accessing them in the template. Especially, the object of internationalization comes from the store before being used to build text elements.

1 Like

Hi @personality-peut, please create a new topic, following our guidelines, with your problem. This is the best way to gain visibility on your specific problem.

Hey @personality-peut

I had a similar problem and I solved it by using the created event. Computed properties are available then and I can re-assign the data I needed. Hope that helps.

1 Like

thanks @ylambda! You solved my problem with the created() solution!

I know this is late but here is what I did, I had a similar problem and I solved it by moving the computed value in the parent component then pass the value as a prop, every time the computed property changes, the component is re-rendered with the new value as a prop.