How to properly embed vue.js in a "regular" site?

Question

Vue.js

Hello.
There is a site on laravel, where on one of the pages it was necessary to make several interactive blocks using vue (slider, questionnaire, dragdrop, something else).
now I just connected vue and the necessary libraries on this page

<script src="{{ url('js/libs/vue.min.js') }}"></script>
<script src="{{ url('js/libs/vue-awesome-swiper.js') }}"></script>
<script src="{{ url('js/libs/vue-radial-progress.min.js') }}"></script>

итд

and wrote one script, something like this:

Vue.use(VueAwesomeSwiper)
Vue.use(RadialProgressBar)

new Vue({
    el: '#slider_view',
    //логика
})

new Vue({
    el: '#dragdrop_view',
    //логика
})

new Vue({
    el: '#test_view',
    //логика
})

everything works, but how correct is this (in particular, separate vue instances for each element)?
Vue is already "full" used in the admin, with webpack and all, is it possible to use it somehow?

Answer 1

Correct in my opinion. I don't see anything wrong with multiple vue instances. This is my favorite part of vue - the ability to embed it anywhere without breaking other functionality.

Answer 2

In fact, it was possible to wrap in a div with id app, put a View instance on the element, and then create methods that would respond to events, v-on: click, etc.

Answer 3

in such cases, I make loadable components that are loaded only if they are used on the page and connect them in one instance of the view

Answer 4

It seems to me that vue is already in Laravel, if so, then the docs should be written how to work correctly.