// We want to retrieve RatingComponent as a pure DOM node let wrapper = document.createElement('div'); // shared state let state = { note: 0 } // crate component to content let SampleComponent = Vue.extend({ data() { return {rating: 0} }, watch: { rating (newVal) { state.note = newVal } }, template: ` <div class="rating"> <div><i><b> My Title </b></i></div> <p>This is an <em> emaphazied text </em>, <a href="#">links </a><strong>And other tags</strong></p> </div>`, }) let component = new SampleComponent().$mount(wrapper) Vue.component('job', { template: '<button class="btn" @click="rate">Click me!</button>', methods: { rate() { this.$swal({ content: component.$el, buttons: { confirm: { value: 0 }, close: { value: 1 }, cancel: { value: 1 } } }).then(() => { this.$swal('Pls accept and give an upvote if this answer helped'); }) } } }); // create a new Vue instance and mount it to our div element above with the id of app var vm = new Vue({ el: '#app' });

 body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; } .rating { padding: 30px 0 0 0; } .vue-star-rating { margin: 20px auto; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; background-color: #42b983; cursor: pointer; color: #fff; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-swal"></script> <div id="app"> <job></job> </div>