Why is Vue 3 throwing an error when connecting?

Question

Vue.js

I am making an example of a counter according to the documentation.
I connect via CDN.
Gives an error message.
[Vue warn]: Component is missing template or render function.
at

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

<div class="container pt-5" id="counter"></div>
    <div class="card center">
      <h1> {{ counter }}</h1>
      <div>
        <button class="btn">+</button>
           </div>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="app.js"></script>

Answer 1

put everything in one div

<div class="container pt-5" id="counter">
  <div class="card center">
    <h1> {{ counter }}</h1>
    <div>
      <button class="btn">+</button>
    </div>
  </div>
</div>