Vue RouterでのdefineAsyncComponentとimport()の使い方

Question

#1
const RequestsReceived = defineAsyncComponent(()=> 
  import('./pages/requests/RequestsReceived.vue')
)

or

#2
const RequestsReceived = ()=> import('./pages/requests/RequestsReceived.vue')

をRouterで遅延読み込みさせる

{ path: '/register', component: CoachRegistration, meta: { requiresAuth: true } },

Vueの公式によるとdefineAsyncComponent に関して下記の内容が推奨されています。

Vue Router は 遅延読み込み と呼ばれるルートコンポーネントを非同期に読み込む似たような仕組みをサポートしています。似てはいますが、この機能は Vue の非同期コンポーネントのサポートとは異なります。 Vue Router でルートコンポーネントを構成するときは、 defineAsyncComponent を 使用しない 必要があります。これについては、 Vue Router のドキュメントの ルートの遅延読み込み で詳しく説明されています

ルートの遅延読み込みに関して

Do not use Async components for routes. Async components can still be used inside route components but route component themselves are just dynamic imports.

質問

1. defineAsyncComponent とimport()の違いが良くわかりません。どちらも動的かつ非同期でコンポーネントを読み込むという認識です。(まして、defineAsyncComponentがimport()をラップしているので混乱しています)

2. defineAsyncComponentは公式に記載されている通り、Vue router内で使用したところ確かに機能しました(#1の記述)。しかし、Vue router内での使用が非推奨である理由が良くわかりません

Answer 1

説明そのままでは？

Async components can still be used inside route components but route component themselves are just dynamic imports.

非同期コンポーネントはルートコンポーネントの内側で使うことはできるが、それ自体がちょうどダイナミックなインポート機能だから。

要は、二重に類似した機能を使うことになる（なぜ、そうなるかというとVueとVue-routerは開発元が違う）ので、想定外の挙動が起きても責任はとらんよってことでしょう。