Components inside components VueJS

Question

I'm new to VueJs and I'm having trouble with the following (excuse me in advance if the question seems dumb but I haven't found an answer to this yet):

var data = {
        info: [
            {
                brand: 'Samsung',
                model: 'A9834',
                color: 'black',
                id: 0
            },
            {
                brand: 'Nokia',
                model: 'Z9234',
                color: 'blue',
                id: 2
            }
        ]
    }

    Vue.component('list-group', {
        template: '<ul class="list-group"><list-group-item v-for="item in info" v-bind:key="item.id" v-bind:properties="item"></list-group-item></ul>'
    })

    Vue.component('list-group-item', {
                template: '<li class="list-group-item">{{properties.brand}}, {{properties.model}}, {{properties.color}}</li>',
                props: ['properties']
    })

    var instance = new Vue({
        el: '.app', 
        data: data
    })

What I'm trying to do with the snippet above is render the component inside the component. The error I get in the console is the following:

[Vue warn]: Property or method "info" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

As you can see, what I expect to get is two li elements inside a ul element (2 elements because I'm looping data.info with a v-for, and data.info has two elements for simplicity); but instead i'm getting the error above. There is obviously something I'm missing here knowledge-wise but I don't know what it is. If you could help me figure it out, I would appreaciate it a lot.

Thanks in advance.

Answer 1

Your code works fine with props: ['info']
https://codepen.io/bsalex/project/editor/ApjgQd#

var data = {
  info: [
    {
      brand: "Samsung",
      model: "A9834",
      color: "black",
      id: 0
    },
    {
      brand: "Nokia",
      model: "Z9234",
      color: "blue",
      id: 2
    }
  ]
};

Vue.component("list-group", {
  props: ["info"],
  template:
    '<ul class="list-group"><list-group-item v-for="item in info" v-bind:key="item.id" v-bind:properties="item"></list-group-item></ul>'
});

Vue.component("list-group-item", {
  template:
    '<li class="list-group-item">{{properties.brand}}, {{properties.model}}, {{properties.color}}</li>',
  props: ["properties"]
});

var instance = new Vue({
  el: ".app",
  template: '<list-group :info="info">',
  data: data
});