0👍
If its a full blown Vue app, then you are thinking of it in the wrong way. You rarely even use document selector in a Vue app.
If it is just a HTML page with one or two simple Vue components being used, then you may have to provide the element selector and provide the data to define and render the Vue component into that existing HTML element.
For example:
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
Refer:
https://v2.vuejs.org/v2/guide/#What-is-Vue-js
Also this tutorial:
https://www.tutorialspoint.com/vuejs/vuejs_instances.htm
In the above example, you are providing the target element, the data and the methods in the component definition itself.
If the data changes, you may have to recreate the component.
Rather than this, if the component listens to an Event bus, you need not render the component again – you could pass (or emit) the data to the component from outside, and it would rerender itself.
Here is a simple event bus example:
https://andrejsabrickis.medium.com/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860