What is the correct way to generate chunks of raw HTML within a vue framework with access to other vue components?

Question

JavaScript

A list of values ​​in reactive variables is generated. Each of the values ​​can be wrapped in HTML code, which can contain calls to other vue components.
How is it generally right to do it? Is there a best practice?
Ideally, generate HTML through JS, insert using vue through reactive variables. Here you need to understand how to correctly access the vue function through raw js. I read the docs until I understood. This is the crux of the matter.
A more redundant option is to fence some templates of vue itself, but I would not want to do that.

Answer 1

So far I don't see any problem. It seems that you just need to deal with templates and components :
Here is the component FooSearchComponentto which we pass the reactive property via props from the parent foo:

Vue.component(
  "FooSearchComponent",
  {
    props: ['foo'],
    template: '<div>
      <a
        href="#"
        @click="searchFoo(foo)"
      >
        {{ foo }}
      </a>
    </div>',
    methods: {
      searchFoo: function(search) {
        console.log("searchFoo:", search);
      },
    }
  }
);

In its template, a link is displayed, in which the click event is listened to and its own method is called on it, searchFoo()in which the property is passed as a parameter (reactive, from outside)foo