Register and use Vue-Multiselect component - vue.js

Question

I want to register and use Vue-Multiselect component in my application, but I'm new to it. I will try to simplify my code and I want to have a help how to do it.
Where do I have to insert the references to use the multiselect that is already on the Usuarios.cshtml file?
Here is the link to the component: https://vue-multiselect.js.org/
My code:
Usuarios.js:
var tableUsuario;
var appUsuario = new Vue({
el: "#usuarioApp",
watch: {},
data: {
Grupos: [],
Grupo: '',
Filiais: [],
FiliaisSelecionadas: []
},
methods: {
getGrupos: function () {
var self = this;
$.ajax({
type: "POST",
url: "../Account/GetGruposFocus",
success: function (data) {
self.Grupos = data.grupos;
},
error: function (error) {
console.log(error);
alert('Erro ao executar operação.');
}
});
},
getFiliaisByNomeGrupo: function () {
var self = this;
var nome = self.Grupo.value.Nome.replace(/ .*/, '');
$.ajax({
type: "POST",
url: "../Account/GetFiliaisByNomeGrupo",
data: { nome },
success: function (data) {
self.Filiais = data.clientes;
},
error: function (error) {
console.log(error);
alert('Erro ao executar operação.');
}
});
}
},
mounted: function () {
self.getGrupos();
}
});
Usuarios.cshtml:
[...]
<section id="usuarioApp" class="content">
<div class="modal fade" id="modal-default" style="display: none;" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Cadastrar usuário</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="selectedGrupo">Grupo</label>
<select class="form-control" id="selectedGrupo" v-model="Grupo.value" v-on:change="getFiliaisByNomeGrupo">
<option v-for="grupo in Grupos" v-bind:value="grupo">{{grupo.Nome}}</option>
</select>
</div>
<div class="col-sm-6">
<label for="selectedFiliais">Filiais</label>
<multiselect v-model="FiliaisSelecionadas" placeholder="Filiais" :options="Filiais" :multiple="true" :taggable="true"></multiselect>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" v-on:click.prevent="salvar" class="btn btn-primary">Salvar</button>
</div>
</div>
</div>
</div>
</section>
<script src="~/Content/js/Views/Account/Usuarios.js"></script>

Answer 1

1.You need first install npm install vue-multiselect --save
2.Then need to import 'vue-multiselect' component in your .js file,
3.Register vue-multiselect as a component inside your vue 'appUsuario' component instance. Please refer below:
import Multiselect from 'vue-multiselect'
var tableUsuario;
var appUsuario = new Vue({
el: "#usuarioApp",
watch: {},
components: { Multiselect },
data: {
Grupos: [],
Grupo: '',
Filiais: [],
FiliaisSelecionadas: []
},
methods: {
},
mounted: function () {
self.getGrupos();
}
});