I have component child Input:

<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>

And I have parent component where I work with this input:

   <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
  }
}

So, the problem is, when I trigger the function it only focuses one time on one field, and then stops. I want to make that focus props works that way, so when it's triggered, the field will be focused, and it will be working not just one time, like in this case.