我自己注册了一个组件 想通过点击按钮 将这个组件添加到ul当中，并能被成功渲染，想请问下该怎么做（还是我的思路是错的） 例如：

<div id='test'>
<button v-on:click='AddItem'></button>
<ul></ul>
</div>
<script type="text/javascript">

  Vue.component('list-test',{
     template:`<li v-if='seen'>123<button v-on:click='seen=!seen' >Delete</button></li>`,
 
  data:function(){
      return {seen:true}}

  ,
})

 new Vue({
     el:'#test',
     data:{},
     methods:{}   
     })
 

    </script>

平常可以直接<ul><list-test></list-test></ul>使用
因为不知怎么用vue.js添加 我尝试试了下

methods:{
         AddItem:function(){
             var list =document.querySelector('ul');
             var listChild=document.createElement('list-test');
             list.appendChild(listChild)
         }

检查发现html中确实有<list-test>标签 但是没被渲染