template need to be wrapped in a unique label. You can OK span and button by wrapping them in a div

try to write it this way:

components: {
    'bottom': Bottom
}

there is also a suggestion: don't name the component with such an intuitive name, it is recommended to name the component with more than two words

for example:

//template
<my-bottom></my-bottom>

//script
components: {
    'my-bottom': Bottom
}

error message has already explained to you why, in the vue component, all node elements can only be wrapped by one parent node.

when there are multiple ways.
so the correct way to write it is:

<template>
  <div>
    <span>demo</span>
    <button></button>
  </div>
</template>

template. If you need more than one root node, use the render function, jump door