How does vue display these two components at the same time?

I want these two subcomponents to be displayed in div1. What should I do if I can only write one and write two at the same time?

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script src="vue.js"></script>
   <script type="text/javascript">
      window.onload=function(){
         var cml={
             template:"-sharpcml",
         }
         var contents={
                template:"-sharpcontent",
         }
         new Vue({
               el:"-sharpdiv1",
               components:{
                  "cml":cml,
                  "content":content
               },
         })
      }
   </script>
</head>
<body>
<template id="cml">
   <div>
       .......
   </div>
</template>

<template id="content">
  <div>
       ........
  </div>
</template>

<div id="div1">
    <cml></cml>
    <content></content>
</div>
</body>
</html>
Apr.03,2021

content this is the key word. Please change the name
and the registration component. The content is missing an s

.
 components:{
                  'cml':cml,
                  'content':contents
               },
Menu