vue.js

//The footer
Vue.component('footer-component', {
  template: `
  <footer id="footer" class="main">
      <ul>
        <template v-for="footerSection in footerSections">
              <li><a href="{{ footerSection.link }}">{{ footerSection.text }}</a></li>
        </template>
      </ul>
      <p> MIT <a href="https://github.com/ZacharyJacobCollins">@Zachary Collins {{footerSections}}</a></p>
      <p class="less-significant">
        <!-- Logo here.  SVG Works well .  -->
      </p>
  </footer>
  `,
  props: ['footerSections'],
});

I want to use this component


<footer-component footerSections="footerSections"></footer-component>

where footer sections are being linked in via this vue object

var footer = new Vue({
    el: "#footer",
    data: {
      footerSections: [
            { text: 'Github', link: 'https://github.com/ZacharyJacobCollins'},
            { text: '[email protected]', link: 'https://gmail.com'},
            { text: 'Twitter', link: 'twitter.com'},
      ],
      signature: {},
      logo: { license: 'MIT', link: 'https://github.com/ZacharyJacobCollins', text: '@Zachary Collins.' }
    },
});