Vue instance in double quotes

I use vue instance but it is not parsing , i think problem is relevant with using double quotes in Metro.dialog.Create.content.

Here is the main page include table and it works correctly.I added when dblclick table on main page open dialog and another table showing in this dialog.

var app2= new Vue({
      el: '#appTable',
      data: {
          squads: [                
          ]
      },        
      mounted: function () {
          Metro.init();
          var self = this;
           $.ajax({
               url: '@Url.Action("Find", "Squad")',
               method: 'GET',
               success: function (data) {
                   self.squads = data;
               },                  
           });
      },
      methods:{
        clickList: function (squad) {
            bindSquadToEditTable(squad.ID);
            Metro.dialog.create({
                title: "Team",
                content:
                  '<div class ="row-4-3 rowspan" >'+
                     '<div id="appTableMembers">'+
                       '<table class="table cell-border ">'+
                         '<thead>'+
                            '<tr>'+
                            '<th>Personal Code</th>'+
                             '<th>Name</th>'+
                              '<th>Email</th>'+
                               '</tr>'+
                          '</thead>'+
                       '<tbody>'+
                       "<tr v-for=squad in members :key=squad.PersonalCode >  <td>{{squad.PersonalCode}}</td>  <td>{{squad.FullName}}</td> <td>{{squad.Email}}</td>"+
                        '</tr>'+
                        '</tbody>'+
                  '</table>'+
                 '</div>',
            });
        }
      }
  });

That is my Main page;

        <div id="appTable">
    <table class="table striped">
        <thead>
        <tr>
            <th>Code</th>
            <th>Description</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="squad in squads" :key="squad.Code" v-on:dblclick="clickList(squad)">
                <td>{{squad.Code}}</td> <td>{{squad.Description}}</td> 
            </tr>
        </tbody>
    </table>
    </div>

Here is the binding data to dialog ;

   <script>
         function bindSquadToEditTable(ID){
              app3 = new Vue({
                  el: 'appTableMembers',
                  data: {
                      members:[]
                  },
                  mounted:function(){
                      Metro.init();
                      var self = this;
                      $.ajax({
                          type: "GET",
                          "url": '@Url.Action("FindByID", "Squad")',
                  "data": { id: ID },
                  "dataSrc": "",
                  success: function(data){
                      self.members = data;
                  },
              });
          }
       })
     }
  </script>

Solution

I was curious how this would work so I threw together a quick test. Worked fine using the hidden <div> for the modal content.

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>

  <body>
    <div id="app">
      <input type="button" value="modal" @click="showModal" />
      <div style="display: none" ref="modalContent">
        <div>My name is {{name}}</div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
  </body>

</html>

Javascript

new Vue({
  el: "#app",
  data: {
        name: 'Sample User'
    },
  methods: {
    showModal: function() {
      Metro.dialog.create({
          title: "Modal Title",
          content: this.getModalContent
          });
    },
    getModalContent: function() {
        return this.$refs.modalContent.innerHTML;
    }
  }
});