JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<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;
    }
  }
});