如何使用計算屬性和道具過濾對象 [VueJS]

首先，提前感謝您的閱讀和幫助。

試圖解決這個問題我有點迷茫。我目前有兩個 Dropdown 組件，它們從一個對象呈現不同的選項。我渲染了兩個下拉菜單。第二個下拉列表將取決於第一個下拉列表的選擇。

假設我在第一個下拉列表中選擇了“BMW”，它應該只呈現“BMW 320i”。

數據對像如下所示：

{
   "menu":[
      {
         "id":"bmw",
         "name":"BMW"
      },
      {
         "id":"volvo",
         "name":"Volvo"
      }
   ],
   "cars":[
      {
         "id":"bmw320",
         "name":"BMW 320i"
      },
      {
         "id":"volvoc70",
         "name":"Volvo C70"
      }
   ]
}

在我的模板中，我有兩個包含下拉列表的子組件。該MenuDropdown包括dataContent.menu內容，並CarDropdown包括dataContent.cars內容。

<MenuDropdown :dataContent="dataContent">
<CarDropdown :dataContent="customDataContent">

CarDropdown 的選項將根據第一個下拉列表 (MenuDropdown) 的選擇而變化。所以我試圖通過使用計算屬性來實現這一點：

computed: {
    customDataContent() {
        if (this.dataContent.menu.id === "bmw") {
            return this.dataContent.cars.filter(car => {
                return car.id === 'bmw320'
            })
        } else {
            return this.dataContent
        }
    }
}

謝謝您的幫助！