title: Problem "vue/no-multiple-template-root" occurs, how do I fix it?
body: <p><strong>Edit: Somehow doing v-if and v-else statements fixed this. Nonetheless could someone explain how to fix this?</strong></p>
  <p>Summary: Error occurs because of 2  Elements present in template. This <a href="https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue">Vue 3 The template root requires exactly one element.eslint-plugin-vue</a> isn't helping. How do I fix this?</p>
  <p>I'm currently following this tutorial (<a href="https://www.youtube.com/watch?v=72Fk9i9HcZM&amp;t=830s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=72Fk9i9HcZM&amp;t=830s</a>) to create a Chat with Vue and Firebase. In the tutorial having two div-Elements is working w/o any issues. However, I tried it and it works but it is underlined in red and I ran into some issues later on. This is the Description of said problem:</p>
  <p><em>[vue/no-multiple-template-root]
  The template root requires exactly one element.eslint-plugin-vue</em></p>
  <p>I searched for some solutions and found this <a href="https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue">Vue 3 The template root requires exactly one element.eslint-plugin-vue</a>. I tried the solutions provided but it doesn't solve the Problem.</p>
  <p>This is my first time working with vue and eslint and I'm a beginner at programming. Could someone help me please?</p>