如何在Vue.js中創(chuàng)建和克隆模板

在這里，用戶應(yīng)該能夠使用方法“useIt（）”的按鈕創(chuàng)建任意多的person Entry。為此，我創(chuàng)建了一個(gè)模板。當(dāng)用戶單擊按鈕時(shí)，模板應(yīng)該被克隆并附加到container div中。我已經(jīng)在jsfiddle中嘗試過這個(gè)函數(shù)，它工作得非常好。現(xiàn)在我把它復(fù)制到我的vue應(yīng)用程序中，它不再工作了。我沒有收到任何錯(cuò)誤或警告，它只是沒有任何作用。可能是什么錯(cuò)誤？

下面是指向我的功能的JSFIDLE鏈接：http://jsfiddle.net/4vuae12j/1/

 <template>
      <div class="content_modal noShadow modul">
        <div class="modal-header modul_header">
          <h3 class="modul_title">{{ title }}</h3>
        </div>
    
    
        <div class="body">     
    
          <!-- Person Data -->
          <testmodul1></testmodul1>
    
          <!-- Degree -->
          <testmodul2 title="2 Degree"></testmodul2>
        </div>
    
        <button @click="useIt()">
          Use me
        </button>
        <div id="container"></div>
    
        <template id="temp">
          <div>
            <label>Firstname</label>
            <input type="text"/>
            <label>Lastname</label>
            <input type="text"/>
          </div>
        </template>
      </div>
    </template>
    <script>
    
        //Load Modules
        let testmodul1 = Vue.defineAsyncComponent(() =>
          loadModule("./components/1_1_Module_Person.vue", options)
        );
        let testmodul2 = Vue.defineAsyncComponent(() =>
          loadModule("./components/2_Module_Degree.vue", options)
        );
        
        export default {
          data() {
            return {
              title: "Title",
            };
          },
          components: {
            testmodul1: testmodul1,
            testmodul2: testmodul2,
          },
          methods:{
            useIt(){
              console.log("##########CLICKED##########");
              var content = document.querySelector('#temp').content;
              console.log(content);
              document.querySelector('#container').appendChild(
              document.importNode(content, true));
            }
          }
        };
        </script>