VueJS data() not working

Question

I am trying to make a VueJS app but I am failing even with the simplest examples. I am using Laravel 5.3 with pre-built support for VueJS (version 1, I tried version 2 as well).

Here is my Example.vue component

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

And here is the main code

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

This is the error that shows up everytime in console:

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

Any ideas whats wrong? Thanks

Answer 1

In your script tags instead of export default use:

module.exports = {
  data() {
    return { counter: 1 }
  }
}

This should work for you

Answer 2

Call the component inside your template

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>