javascript - template - vue single file components

¿Cómo se muestran datos a través de componentes con Vue.js(usando Vueify)?

Question

Tengo problemas para mostrar datos en mis componentes Vue. Estoy usando Vueify y estoy tratando de cargar una matriz de listados desde el componente listings.vue y sigo recibiendo errores. Además, no entiendo cómo obtener los datos a través del método computed . Cualquier ayuda sería apreciada.

Este es el error que estoy recibiendo en la consola:

[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.

Aquí está mi 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>

Aquí está mi componente listings.vue

<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

La primera advertencia significa que cuando se define un componente, la opción de data debería verse así:

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

Además, no coloque las solicitudes ajax dentro de las propiedades calculadas, ya que los getters calculados se evalúan cada vez que accede a ese valor.