Question: I have the following vuejs component. I know that it is a pretty simple example, but still it does not load correctly. Find below my code:

```js
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data: {
    msg: 'hello'
  }
});

new Vue({
  el: '#app-6'
});
```

```html
<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>

<body>

  <div id="app-6">
    test
    <my-component></my-component>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
</body>

</html>
```

Any suggestions what I am doing wrong?

I appreciate your replies!

Answer: 
Data Must be a function always

```js
var data={msg: 'hello'}    
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data:function() {
       return data;
  }
});

new Vue({
  el: '#app-6'
});
```

```html
<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
  <div id="app-6">
    test
    <my-component></my-component>
  </div>

</body>

</html>
```
Your data should be a function like this:

```
data () {
    return {
        msg: 'Hello'
    }
}

```

More information here:
<https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function>