顯示樹組件是一種常見的前端組件，它可以方便地展示層次結構，讓用戶可以更加直觀地了解數據。在Vue中，我們可以通過使用組件來創建一個顯示樹。下面，我們來詳細介紹如何實現這個組件。

首先，我們需要定義一個樹節點的數據結構，它包含它自身的值和子節點列表：

const treeNode = {
value: "",
children: []
};

接著，我們可以創建一個樹組件：

Vue.component('tree', {
props: ['data'],
template: `
{{ item.value }}
`
});

在這個組件中，我們通過props屬性來接收樹節點數據。在模板中，我們使用v-for指令來遍歷所有的節點，使用v-if指令來判斷是否存在子節點。如果存在子節點，我們遞歸地調用tree組件來顯示它的子節點。

接下來，我們可以定義一個樹節點數據源：

const treeData = [
{ 
value: 'Root',
children: [
{ 
value: 'Node 1',
children: []
},
{ 
value: 'Node 2',
children: [
{ 
value: 'Node 2-1',
children: []
},
{ 
value: 'Node 2-2',
children: []
}
]
},
{ 
value: 'Node 3',
children: []
}
]
}
];

最后，我們可以將tree組件渲染到HTML頁面上：

new Vue({
el: '#app',
data: {
treeData: treeData
}
});

在HTML頁面中，我們只需要簡單地使用

<div id="app">
<tree :data="treeData"></tree>
</div>