Как можно запустить библиотеку Popper.js в экземпляре Vue

Question

У меня есть спа-центр Vue. Я хочу реализовать всплывающее окно popper.js в соответствии с этим кодом из официальных документов https://codepen.io/FezVrasta/pen/yWGrOZ. Кажется, я не могу расположить элемент "pop" справа от "ref". Div "pop" отображается под div "ref". Что мне нужно сделать во Vue, чтобы Поппер поместил размещение справа от "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},
            }
        });
    },