Disclaimer: I have tried to read the docs before opening this question.

I have this component:

<template> <accordion id="facilities-menu" :one-at-atime="true"> <template v-for="facilities in facilitiesGroups"> <panel class="accordion-toggle" :header="`Facilities #${$index+1}`" :is-open="$index === 0"> <ul> <li v-for="facility in facilities"> {{facility}} </li> </ul> </panel> </template> </accordion> </template> <style lang="scss" scoped> @import "../../../styles/theme-colors.scss"; .panel { background: #5E6466; border: none; } </style> <script> import { accordion, panel } from 'vue-strap' module.exports = { components: { accordion, panel }, data () { return { 'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] } } } </script>

And then I instantiate this component like this:

<template> <div class="user"> <user></user> </div> <facilities></facilities> </template> <style lang="scss" scoped> @import "../../../styles/theme-colors"; .user { width: 100%; height: auto; margin-top: 8%; margin-bottom: 5%; } </style> <script> import User from './userProfile' import Facilities from './groupedFacilities' module.exports = { components: { 'user': User, 'facilities': Facilities } } </script>

However, you can see that in the first component I am defining the data to be { 'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] } . But i want this to be passed as an argument, not to be statically defined in the component as it is now.

I have read the docs about how could this be done here. But their example...

Vue.component('child', { // declare the props props: ['msg'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}</span>' })

...Resembles nothing to what I have in my code... I don't even use Vue.component() anywhere!

How come I am using a different "style" of coding with Vue JS (I started from their boilerplate)?

How can I map Vue JS official documentation to this "style"?

How can pass that array as an argument/property?

Thanks!