Para casos onde o precise executar um JavaScript externo, especialmente estes que manipulam a DOM, é recomendado que encapsule o mesmo em um componente.
Outro ponto importante, é que as propriedades e opções passadas para o componente devem ser reativas, neste caso, você deverá estudar o componente para estudar a melhor abordagem.
E por fim, tão importante quando iniciar o componente externo ou montar o componente Vue, é destruir o componente externo ao destruir o componente Vue.
Segue abaixo um exemplo de como se fazer um Componente para Edição e Criação de um Registro dentro de um Modal.
Vue.component('edit-or-create', {
template: '#edit-or-create',
props: ['show', 'nome', 'email', 'titulo'],
data () {
return {
inner: {
nome: '',
email: ''
}
}
},
mounted () {
this.modal = M.Modal.init(this.$refs.modal);
this.checkShow();
},
beforeDestroy () {
this.modal.destroy()
},
watch: {
show () {
this.checkShow();
}
},
methods: {
checkShow () {
if (this.show) {
this.inner.nome = this.nome
this.inner.email = this.email
this.modal.open()
} else {
this.modal.close()
}
},
cancelar () {
this.$emit('update:show', false);
},
salvar () {
this.$emit('update:nome', this.inner.nome);
this.$emit('update:email', this.inner.email);
this.$emit('update:show', false);
this.$emit('salvar')
}
}
});
new Vue({
el: '#app',
data () {
return {
create: { show: false, nome: '', email: '' },
contatos: [{
edit: false, nome: 'Tobias Mesquita', email: '[email protected]'
}]
}
},
methods: {
created () {
this.contatos.push({ edit: false, nome: this.create.nome, email: this.create.email })
},
apagar (contato) {
var index = this.contatos.indexOf(contato)
this.contatos.splice(index, 1)
}
}
})
body {
padding: 5px;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.js"></script>
<div id="app">
<button class="waves-effect waves-light btn-small" @click="create.show = true">
<i class="material-icons left">note_add</i>Novo
</button>
<edit-or-create
titulo="Novo Contato"
:show.sync="create.show"
:nome.sync="create.nome"
:email.sync="create.email"
@salvar="created">
</edit-or-create>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
<tr v-for="(contato, indice) in contatos">
<td>{{contato.nome}}</td>
<td>{{contato.email}}</td>
<td>
<button class="btn waves-effect waves-light btn-small" @click="contato.edit = true">
<i class="material-icons left">edit</i>Editar
</button>
<button class="btn waves-effect waves-light btn-small" @click="apagar(contato)">
<i class="material-icons left">delete</i>Delete
</button>
<edit-or-create
:titulo="'Editar ' + indice"
:show.sync="contato.edit"
:nome.sync="contato.nome"
:email.sync="contato.email">
</edit-or-create>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/x-template" id="edit-or-create">
<div ref="modal" class="modal">
<div class="modal-content">
<h4>{{titulo}}</h4>
<div>
<div class="row">
<div class="input-field col s12">
<input id="first_name" type="text" v-model="inner.nome">
<label for="first_name">Nome</label>
</div>
<div class="input-field col s12">
<input id="last_name" type="text" v-model="inner.email">
<label for="last_name">Email</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn waves-effect waves-light btn-small" @click="cancelar">
Cancelar
</button>
<button class="btn waves-effect waves-light btn-small" @click="salvar">
Salvar
</button>
</div>
</div>
</script>
Porém, o mais recomendado seria implementar um componente exclusivo para o modal, e usar um slot para o conteúdo do mesmo.