その Vue オブジェクトがコントロールする配下でしか動作しないコンポーネントを定義することができる。

Vue.js/コンポーネント の特異版と思えばヨイ。なのでこれが登録されている Vueオブジェクトが管理するテンプレート下しか通用しない。

このように components 以下にキーを登録するコンポーネント名で値にパラメータを渡す。

var vm = new Vue({
    components: {
        "hogehoge": {
            template: '<div>hoge</div>'
        }
    }
});

これは画面にコントロールする要素が1個しか無く、処理も複雑では無い場合はいいかもしれんが、 明らかに不便である、このような場合は部品の構造そのものに対する限定的な意味が強いので

var HogeVue = Vue.extend({
    template: '<div>hoge</div>'
});
var vm = new Vue({
    components: {
        "hogehoge": HogeVue
    }
});

となり

これを押し進めて

var HogeVue = Vue.extend({
    components: {
        "hogehoge": {
            template: '<div>hoge</div>'
        }
    }
});
 
var vm = new HogeVue({});

さらに押し進めて

var PiyoVue = Vue.extend({
    template: '<div>hoged</div>'
});
var HogeVue = Vue.extend({
    components: {
        "hogehoge": PiyoVue
    }
});
 
var vm = new HogeVue({});

このようになっていくのだろう。

つまり、これはテンプレートと各オブジェクトのパラメータの間に一枚レイヤーを仕込むということなので、同じテンプレートで挙動は違うという設計が可能になるとは思うのだが紛らわしくなるのでやめたほうがよいだろう。 名前の衝突の心配がなくなるという意味で考えておけばよい。