Удаляется класс в input Vue

У меня есть элементы <span class="auth__form-placeholder"></span>, которые выступают в форме заднего текста для <input class="auth__form-input"> (вместо атрибута placeholder) и при фокусе на input'ы элементы span должны подниматься вверх (им добавляется класс "focus-placeholder"), то есть происходит анимация. Проблема в том, что, когда я начинаю писать в input, то этот класс (focus-placeholder) удаляется, хотя должен тогда, когда я покину поле.

Шаблон

<form class="auth__form">
 <label class="auth__form-label" for="username">
  <span class="auth__form-placeholder">Имя пользователя</span>
  <input 
   class="auth__form-input input" 
   id="username" 
   type="text" 
   ref="username"
   @focus="focusInput($refs.username)" 
   @blur="blurInput($refs.username)"
  >
 </label>
 <label class="auth__form-label" for="password">
  <span class="auth__form-placeholder">Пароль</span>
  <input 
   class="auth__form-input input" 
   id="password" 
   type="password" 
   ref="password"
   @focus="focusInput($refs.password)" 
   @blur="blurInput($refs.password)"
  >
 </label>
 <label class="auth__form-label" for="submit">
  <input class="auth__form-submit" type="submit" value="Войти">
 </label>
</form>

Методы

methods: {
 focusInput(input) {
  input.previousElementSibling.classList.add('focus-placeholder');
 },
 blurInput(input) {
  if (!input.value) {
   input.previousElementSibling.classList.remove('focus-placeholder');
  } else {
   input.previousElementSibling.classList.add('focus-placeholder');
  }
 }
}