How to remove parent element of Vue component after export?

Question

JavaScript

<template>
  <h1>Vue.js</h1>
  <p>Hello</p>
  <img src="">
</template>

When exporting a Vue component template, it throws an error:

template syntax error Component template should contain exactly one root element

Well, of course, you need to wrap it in one element if the template has several parallel tags.

<template>
  <div>
    <h1>Vue.js</h1>
    <p>Hello</p>
    <img src="">
  </div>
</template>

But after export, in the parent component, this main tag interferes (don't ask how, you just need to get rid of it). How can I remove it? Is it possible to apply some kind of unwrap on the component?) And in what property of the component is its html-body? Through console I could not find it at all.

Answer 1

Either so, through the render() function - https://jsfiddle.net/0u4t1nn6/1/
Or access the DOM
or so, if necessary, from the parent
and remove the wrapper.

Answer 2

Try wrapping your template in a transition-group
You are doing something wrong architecturally
</зануда моде>

Answer 3

Understood. I stupidly connected Jquery through modules and called $('element').remove() in the mounted hook. But if there are more reasonable options, then be sure to write)