How to embed vue component in html?

Question

Vue.js

In general, the question is this. (Apache Echarts charts are used)
There is a chart.

The graph has corresponding points, over which hints appear when you hover.
The tooltip content is simply html text defined in one of the chart options:

let tooltip = `
Ask Price: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
//возвращаем подсказку чтобы отрисовать её
return tooltip

Sobsna needs to be done somehow so that when you click on the word "Ask Price", you can do some kind of action, for example, open a modal window.

Tried to do like this:

//this.showInfo - метод текущего компонента
let tooltip= `
<span @click="${this.showInfo}">Ask Price</span>: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
return tooltip

Of course it doesn't work that way, because @click is not rendered.

I tried to do it this way, it doesn't work either, instead of the hint "[object HTMLDivelement]" is displayed:

//в ModalInfo кроме слота больше ничего нет
import ModalInfo from '@/components/ModalInfo'
//...
let ComponentClass = Vue.extend(ModalInfo)
let tooltipInfo = new ComponentClass()
tooltipInfo.$slots.info =  `
<span @click="${this.showInfo}">Ask Price</span>: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
tooltipInfo.$mount()
return tooltipInfo.$el
//...

Answer 1

Do you understand that ``simple text is put in quotes , but this.showInfoyou have a function in it ?
This will never work.
Why does this work in .vue files inside <template>? Because .vue is not .js, it's a separate file format using a separate templating microlanguage that compiles to js.
A simple, but bad, option is to use a regular html onclick pointing to a globally fumbled function.
A complex option - a complex one, you need to think and first deal with echarts - maybe something simpler can be created.
...upd:
Yes, you can make it easier if you read the docs :
No text needed, tooltip formatter can return HTMLElement and HTMLElement[].
So you can just do something like this:

formatter: (params) => {
  const span = document.createElement('span');
  span.onclick = this.showInfo;
  span.textContent = 'Ask Price';

  return [
    span,
    document.createTextNode(`: ${params.value[0]}`),
    document.createElement('br'),
    document.createTextNode(`Duration:  ${params.value[1]}`),
  ]
}

You can even rig a standalone vue component, but you don't have to.