在defineAsyncComponent 中的ES6 命名导入

我想异步加载我的网络应用程序的一些元素：

这是旧的导入：

import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue'

export default {
    components: {
        Popover,
        PopoverButton,
        PopoverPanel,
    },
...

现在我想这样做：

import {defineAsyncComponent} from "vue";

export default {
    components: {
        Popover: defineAsyncComponent(() =>
            import( {Popover} from "@headlessui/vue" ) // This does not work as I get the error " ')' expected"
        ),
        ...
    },
...

知道我如何解决这个问题吗？