Vue的document click事件可以用來監聽用戶對頁面的點擊操作，常被用于實現一些彈出層或下拉菜單等交互組件的關閉操作。

mounted() {
// 監聽document的click事件
document.addEventListener('click', this.handleClick);
},
beforeDestroy() {
// 移除監聽事件，防止內存泄漏
document.removeEventListener('click', this.handleClick);
},
methods: {
handleClick(event) {
// 判斷點擊的元素是否位于彈出層內，如果不是，則執行關閉操作
const popUp = document.getElementById('pop-up');
if (popUp && !popUp.contains(event.target)) {
this.closePopUp();
}
},
closePopUp() {
// 關閉彈出層的邏輯
// ...
}
}

在上述代碼中，我們在組件的mounted鉤子函數中監聽了document的click事件，并在組件銷毀前移除了監聽，以避免內存泄漏的問題。

在handleClick方法中，我們判斷了點擊事件的目標元素是否位于彈出層內，如果不是，則執行關閉操作。需要注意的是，在彈出層關閉的邏輯中，我們需要同時關閉對應的數據狀態，這可以通過Vue的v-model指令或手動綁定一個Boolean值來實現。