先介紹一下 MongoDB。MongoDB是一個開放源代碼的文檔數據庫，它是由C++語言編寫的。它支持圖形存儲、具有高度靈活可擴展性、高性能、易于開發和維護等特點，被廣泛應用于Web應用程序、物聯網、大數據等領域。

Vue是一款輕量級的MVVM前端框架，它是一款基于組件化的框架，具有數據響應式、模板渲染、組件化等特點。Vue是一種漸進式JavaScript框架，可以通過一系列的庫、插件組合來實現自定義需求的開發。

const collection = db.collection('todos');
const result = await collection
.find({ time: { $gt: new Date() } })
.toArray();

MongoDB的查詢語法非常強大，可以滿足各種需求。在以上代碼中，我們使用了$gt操作符來實現查詢時間大于當前時間的記錄。$gt表示大于，$lt表示小于，$gte表示大于等于，$lte表示小于等于，$ne表示不等于。

在Vue中，我們可以使用計算屬性來實現實時查詢。計算屬性是一種可以根據數據動態計算的屬性。我們可以使用計算屬性來實現查詢滿足條件的記錄。在Vue中，計算屬性需要定義一個get方法，如果需要設置值，還需要定義一個set方法。

computed: {
filteredTodos() {
return this.todos.filter(todo =>todo.time >new Date());
}
}

以上代碼為我們使用計算屬性來實現查詢時間大于當前時間的記錄。filteredTodos為計算屬性的名稱，它依賴于todos和當前時間。如果todos或當前時間發生變化，計算屬性會被重新計算。

總的來說，MongoDB和Vue可以非常好地結合使用，MongoDB提供了高效、靈活的數據存儲和查詢能力，而Vue提供了前臺頁面的渲染和響應能力。