How to render a custom component into a map's marker popup? - vuejs2

Question

I am using a Vue plugin component Timeago, and i want to show a timeago time in the content of a map plugin. A super-simplified example to illustrate the usage would be something like:
let popup = L.responsivePopup().setContent(`
<h1>Hello world</h1>
<p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
`);
L.marker([lat, lon]).bindPopup(popup).addTo(this.map);
According to this answer, and Vue's documentation, i should be able to compile this using Vue.compile(), but i am not understanding the concept.
First, there is no explanation on what a "full build" is. How can i tell if what i have is a "full build"? Searching for "vuejs full build" doesn't return anything that is being referred to as literally that phrase, even though they use it in the documentation there. All i know is that when i try to call Vue.compile() with having imported import Vue from 'vue', it complains saying:
TypeError: vue__WEBPACK_IMPORTED_MODULE_6__.default.compile is not a function
So i don't know where to go from there.
And then second thing is (assuming the first thing gets sorted), will i have to make my HTML hold an empty div with a specific id, wait for it to render, and then call the Vue.compile() on it, since the sample code there runs with .mount() on an element id? Because that seems a little "incorrect", having seemingly an extra step. Or is that the only way to make this scenario work?
If there is an alternative simpler wait of making this work, like getting the Timeago component to just return the rendered string only, such as 2 hours ago that i can incorporate into my string literal, that would work for me as well. Either way is fine.

Answer 1

Vue has differents build of it's package, full means that package can compile templates and and run it. All build types can be found here https://v2.vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
Vue.compile allows you to use render functions, which allow you to manipulate DOM and create elements in a programmatic way. Here you can find Vue documentation about it https://v2.vuejs.org/v2/guide/render-function.html
About the issue you are facing, you can create a vue component and put that popup inside it, this component when render will render the timeago component.
<template>
<h1>Hello world</h1>
<p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
</template>
import Timego from './Timeago.vue'
export default {
components: {
Timeago
},
props: {
datetime: String
}
}