​

// This is a component definition

var ComponentA = Vue.extend({

  template: 'I am component A' 

});

​

// The ideal scenario would be to define the component name

// directly inside it.

var ComponentB = Vue.extend({

  template: 'I am component B'

});

​

// ..But this is the list I am currently having to maintain separately

var componentList = [

​

  // The name property is important and is a human-readable

  // description that the select element will show.

  { name: 'Component A', id: 'component-a' },

  { name: 'Component B', id: 'component-b' }

];

​

new Vue({

  el: 'body',

  data: {

    someOtherData: '',

    // The list is linked here...

    componentList: componentList,

    // A default component is provided here...

    currentComponent: 'component-a',

  },

  // And, if I am using this property below, why can't I use it

  // to fetch the list instead?

  components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  },

  // Here's what I tried doing:

  computed: {

    componentListComputed: function() {

       // use this.$options.components instead?

    }

  }

});