Vue not displaying data from data object

Question

I am using NuxtJs and created test.vue in pages directory. Here is my code in test.vue.

<template>
  <div> 
    <h1 style="font-size: 30px">{{ message }} </h1>
    <h1 style="font-size: 30px"> Messsage here </h1>
  </div>
</template>

<script>

export default {
  data: {
    message: 'sdfsd'
  }
}
</script>

But {{ message }} not displaying. What is the problem?

Answer 1

The data needs to be a function so that each instance can maintain an independent copy of the returned data object.

export default {
  data() {
    return {
       message: 'sdfsd'
    }
  }
}

Read more here