How do I display data through components with Vue.js (using Vueify)?

Question

I'm having trouble getting data to display in my Vue components. I'm using Vueify and I'm trying to load an array of listings from the listings.vue component and I keep getting errors. Also, I don't understand how to pull in the data via the computed method. Any help would be appreciated.

This is the error I'm getting in the console:

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. 
[Vue warn]: $mount() should be called only once.

Here is my app.vue

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
    <div class="container">
        <div class="listings" v-component="listings" v-repeat="listing"></div>
    </div>
</template>

<script>
    module.exports = {
        replace: true,
        el: '#app',
        components: {
            'listings': require('./components/listings.vue')
        }
    }
</script>

Here is my listings.vue component

<style>
.red {
  color: #f00;
}
</style>

<template>
  <div class="listing">{{title}} <br> {{description}}</div>
</template>

<script>

    module.exports = {

          data: {
            listing: [
              {
                title: 'Listing title number one',
                description: 'Description 1'
              },
              {
                title: 'Listing title number two',
                description: 'Description 2'
              }
            ]
          },

        // computed: {
        //  get: function () {
        //      var request = require('superagent');
        //      request
        //      .get('/post')
        //      .end(function (res) {
        //          // Return this to the data object above
      //                // return res.title + res.description (for each one)
        //      });
        //  }
        // }
    }
</script>

Answer 1

The first warning means when you are defining a component, the data option should look like this:

module.exports = {
  data: function () {
    return {
      listing: [
          {
            title: 'Listing title number one',
            description: 'Description 1'
          },
          {
            title: 'Listing title number two',
            description: 'Description 2'
          }
        ]
     }
   }
}

Also, don't put ajax requests inside computed properties, since the computed getters gets evaluated every time you access that value.