javascript - Popper.js 库如何在 Vue 实例中运行

Question

我有一个 Vue 水疗中心。我希望根据官方文档https://codepen.io/FezVrasta/pen/yWGrOZ中的这个 codepen 实现 popper.js 弹出窗口 。我似乎无法将“pop”元素定位在“ref”的右侧。“pop” div 显示在“ref” div 下。我需要在 Vue 中做什么才能让 Popper 将位置放在“ref”的右侧？

我安装并导入了 popper.js

 import Popper from 'popper.js';

设置我的 HTML

<div id="ref" aria-describedby="pop">
        ref
    </div>
    <div id="pop" role="tooltip">
        <div x-arrow></div>
        pop
    </div>

安装组件后，我启动 Popper。

mounted() {
        let referenceEl = document.getElementById("ref");
        let popperEl = document.getElementById("pop");
        let popperInstance = new Popper(referenceEl, popperEl, {
            placement: "right",
            modifiers: {
                applyStyle: {enabled: false},
            }
        });
    },