Componentes servem para serem reaproveitados, não seria necessária a utilização do mixin, que é reaproveitamento de fragmentos de componentes.
Você tem dois problemas aí:
Mixin injeta valores dentro de componentes, mas seus valores não são compartilhados
O Mixin serve para que você não precise repetir códigos em componentes distintos que tenham alguma função/dado em comum, mas eles não são compartilhados entre si, se você altera um, não altera o do outro, o Vue não permite isso¹.
Como você está usando o mixin dentro do componente login
que está comportando seu componente userform
, você está apenas replicando o valor de userform
dentro de login
(você pode conferir no VueDevTools).

Mas isso não é o causador do seu problema, vamos então a ele...
Chamar userform
diretamente, faz com que você selecione o objeto userform
do componente Login
importado e não o componente userform
em si.
Não sei com certeza se esse é o comportamento, mas ao chamar userform
você está chamando o objeto instanciado dentro de components: { userform }
, pois pense comigo, e se você tivesse 2 tags <userform>
, qual você acessaria? A reatividade é inerente a cada componente, de forma independente.
[tl;dr]
Por isso ele pega o valor do objeto userform
, que está com os valores pré-definidos, que só se alterarão se você mexer no objeto, mas mesmo assim, sem alterar o valor dos componentes, que já são outros objetos.
Uma forma de contornar esse problema é utilizando as referências.
Para utilizá-las, você deve adicionar propriedade ref
no componente e acessá-la usando
this.$refs.nome_da_ref.nome_do_dado
.
Ex(componente myComponent.vue):
<template>
<input v-model='x'>
</template>
<script>
export default {
data (){
return {
x: 10
}
}
}
<script>
Ex(Componente teste.vue):
<template>
<my-component ref='meuComponent'>
</template>
<script>
import myComponent from './myComponent'
export default {
components: { myComponent }
methods: {
showData() {
console.log(this.$refs.x);
}
}
}
<script>
Assim que você alterar o valor do input do <my-component>
a reatividade funciona e o método showData()
printará o valor digitado.
Resultado
Algumas alterações precisam ser feiras no componente login:
- Remova o mixin
- Adicione a referência
- Altere seu método para utilizar a referência no lugar do objeto
Código:
<template>
<section class="col-md-4 col-md-offset-4">
<userform ref='meuForm'></userform>
<button @click="sendLogin()">
Logar
</button>
</section>
</template>
<script>
import userform from './../../forms/userform.vue'
export default {
name: "login",
components: {userform},
methods: {
sendLogin() {
console.log( "Usuario " + this.$refs.meuForm.login )
console.log( "Senha " + this.$refs.meuForm.password )
}
}
}
</script>
Isso deve resolver.
Recomendações e Convenções
Se quer utilizar um mesmo dado de forma global, para diversos componentes na mesma view, sugiro que dê uma olhada no Vuex.
Utilize algum prefixo em seus componentes, isso poderá evitar dores de cabeça mais tarde (componentes de terceiros com o mesmo nome, componentes já existentes no HTML, etc).
Ex: <lvcsUserForm>
ou <lvcs-user-form>
.
Trate componentes como objetos que são, utilizando camelCase em seus nomes durante o import
, e repita-os nos arquivos.
Isso até te ajuda, não sendo necessário o atributo name
no componente, e ele poderá ter sua tag escrita de duas formas, com PascalCase ou kebab-case, mas isso é definido pelo nome utilizado no import
, como import MeuForm from './../../forms/userform'
poderá ser usado como <MeuForm>
ou <meu-form>
.
*Obs: O mesmo não funciona para props
, elas devem ser nomeadas em camelCase e sempre serão escritas em kebab-case no componente, eg. <meu-form my-prop="10">
.