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
               },
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eaef24-221d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eaef24-221d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?