How can the Popper.js library be run in a Vue instance

Question

I have a Vue spa. I wish to implement a popper.js popup as per this codepen from the official docs https://codepen.io/FezVrasta/pen/yWGrOZ. I cannot seem to get the "pop" element positioned to the right of "ref". The "pop" div is showing under the "ref" div. What do I need to do in Vue to have Popper put the placement to the right of "ref"?

I installed and imported popper.js

 import Popper from 'popper.js';

Set up my HTML

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

When the component is mounted I instatiate Popper.

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