How to render component from method of another component in Vue.js - vue.js

Question

I have a form which contains selector input, and this form is in pop-up window. Now my selector not displayed, because it renders after the main window loaded. How can I make the component which renders my selector (renderPositions), render it from method showPopup() (after the pop-up window appears)? Thanks in advance.
var usersControllerApi = Vue.resource('./users_controller/all{/id}')
var positionsControllerApi = Vue.resource('./positions_controller/all{/id}')
Vue.component('users', {
props: ['listOfUsers'],
template: '<tbody>' +
'<tr v-for="user in listOfUsers" >' +
'<td class="first_column">{{user.login}}</td>' +
'<td>{{user.fullName}}</td>' +
'<td>{{user.position.positionDescription}}</td>' +
'<td>{{user.active ? "Да" : "Нет"}} </td>' +
'<td>{{user.createDate}}</td>' +
'<td>{{user.lastUpdateDate}}</td>' +
'<td class="seven_column"><button>Изменить</button></td>' +
'<td class="eight_column"><button>Удалить</button></td>' +
'</tr>' +
'</tbody>',
created: function () {
usersControllerApi.get().then(result => result.json().then(data => data.forEach(user => {
this.listOfUsers.push(user)
}
)))
}
});
Vue.component('positions', {
props: ['listOfPositions'],
template: '<select class="form_input" id="positionsselector">' +
'<option v-for="position in listOfPositions" v-bind:value="position.positionDescription">{{position.positionDescription}}</option>' +
'</select>',
created: function () {
positionsControllerApi.get().then(result => result.json().then(data => data.forEach(pos => {
this.listOfPositions.push(pos)
}
)))
}
});
var renderUser = new Vue({
el: '#tableBody',
template: '<users :listOfUsers="listOfUsers" />',
data: {
listOfUsers: []
}
});
var renderPositions = new Vue({
el: '#positionsselector',
template: '<positions :listOfPositions="listOfPositions"/>',
data: {
listOfPositions: []
}
});
var createButtonScope = new Vue({
el: '#createButtonScope',
data: {
isPopupVisible: false,
login_input:'',
password_input:'',
repassword_input:'',
surname_input:'',
name_input:'',
},
methods: {
showPopup() {
this.isPopupVisible = true;
},
closeModalWindow() {
this.isPopupVisible = false;
},
validate() {
}
}
})
var comp = Vue.component('add-popup', {
props: {
header_title: '',
button_1_name: '',
button_2_name: ''
},
template: ' <div id="popup_window">\n' +
' <div class="Dialog">\n' +
' <div class="Dialog_overlay">\n' +
' <div class="Dialog_content">\n' +
' <div class="Dialog_header">\n' +
' <span class="modal_header_text">{{header_title}}</span>\n' +
' <span><i class="material-icons" #click="closePopup">close</i></span>\n' +
' </div>\n' +
' <div class="Dialog_body">\n' +
' <slot></slot>\n' +
' </div>\n' +
' <div class="Dialog_footer">\n' +
' <div class="modal_button_1_container">\n' +
' <button class="modal_button_1" #click="validate_form">Создать</button>\n' +
' </div>\n' +
' <div class="modal_button_2_container">\n' +
' <button class="modal_button_2" #click="closePopup">Отмена</button>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>',
methods: {
closePopup() {
this.$emit('close_popup') элементу
},
validate_form() {
this.$emit('validate')элементу
}
},
data: function () {
return {
}
}
});