Tengo una Input secundaria componente:

 <template> <div class="basic-input-outer" :style="styles"> <p class="paragraph-small">{{ title }}</p> <input ref="name" :type="type" class="basic-input"> </div> </template> <script> export default { name: "Input", props: ['type', 'styles', 'title', 'focus'], watch: { focus: function() { this.setFocus() } }, methods: { setFocus() { this.$refs.name.focus() } } } </script> <style lang="scss"> @import "../assets/css/components/Input"; </style>

Y tengo un componente principal donde trabajo con esta entrada:

 <div class="login-options"> <p class="choose" @click="chooseLogin('email')">With Email</p> <div class="vertical-line" /> <p class="choose" @click="chooseLogin('phone')">With Phone Number</p> </div> <div v-if="loginWithEmail"> <Input :focus="emailFocus" :title="'Email'" :type="'email'" /> </div> <div v-else> <Input :focus="phoneFocus" :title="'Phone number'" :type="'email'" /> </div> ... chooseLogin(option) { if (option === 'email') { this.loginWithEmail = true this.emailFocus = true } else { this.loginWithEmail = false this.phoneFocus = true } }

Entonces, el problema es que cuando activo la función, solo se enfoca una vez en un campo y luego se detiene. Quiero hacer que los accesorios de focus funcionen de esa manera, de modo que cuando se active, el campo se enfocará y funcionará no solo una vez, como en este caso.