Validation focus and error on the label text and input border - vue.js

Question

I'm new to vue js and still trying to figure out how to do it in a correct way.
I have input validation, when it's empty and click outside the input, it shows an error or red color on the border and label input. When it's onfocus, click inside the input or typing text, the border and label text becomes blue.
I do this with javascript and it works. (code snippet below)
I tried using vue to do that, but when I click 1 input, the other input also become focus.
(code snippet below)
My question is it possible to code it using vue instead of vanila?
VUE
data: function() {
return {
focusBlue: true
}
}
computed: {
inputFocus: function(){
return{
focus_blue: this.focusBlue
}
}
.focus_blue{
border: 1px solid #4990e2 !important;
}
.test1 input {
background-color: transparent;
border: 1px solid #9b9b9b;
padding: 10px;
color: #ffffff;
}
.test1 input:focus {
outline: none;
}
.test1 {
display: flex;
flex-direction: column;
width: 48%;
margin-top: 25px;
}
.test2{
color: #9b9b9b;
font-size: 14px;
margin-bottom: 5px;
display: block;
}
<div class="test1">
<label class="test2">First Name *</label>
<input type="text" #click="focusBlue = !focusBlue" :class="inputFocus">
</div>
<div class="test1">
<label class="test2">First Name *</label>
<input type="text" #click="focusBlue = !focusBlue" :class="inputFocus">
</div>
<div class="test1">
<label class="test2">First Name *</label>
<input type="text" #click="focusBlue = !focusBlue" :class="inputFocus">
</div>
JAVASCRIPT
userInputValidation: function() {
const userInput = document.querySelectorAll(".inputJs");
const userLabel = document.querySelectorAll(".guestlist-form-label");
const textArea = document.querySelector(".test");
userInput.forEach(function(input, index) {
const labelInput = userLabel[index];
const errorClass = "has-error";
const blueClass = "has-blue";
input.addEventListener("blur", function() {
var hasError = input.value === "";
input.classList.toggle(errorClass, hasError);
labelInput.classList.toggle(errorClass, hasError);
labelInput.classList.remove(blueClass);
console.log("okay");
});
input.addEventListener("focus", function() {
input.classList.remove(errorClass);
labelInput.classList.remove(errorClass);
labelInput.classList.add(blueClass);
console.log("okay");
textArea.classList.add(blueClass);
});
});
},
.guestlist-form-wrapper-textarea {
width: 100%;
margin-top: 25px;
}
.guestlist-textarea {
background-color: transparent;
text-indent: 5px;
height: 50px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #ffffff;
}
.guestlist-form-label.has-blue {
color: #4990e2;
}
.guestlist-form-label.has-error {
color: #d04843;
}
.inputJs.has-error {
border: 1px solid #d04843;
}
.guestlist-form-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 62%;
}
.guestlist-form-wrapper-input {
display: flex;
flex-direction: column;
width: 48%;
margin-top: 25px;
}
.guestlist-form-label {
color: #9b9b9b;
font-size: 14px;
margin-bottom: 5px;
display: block;
}
.guestlist-form-wrapper-input input {
background-color: transparent;
border: 1px solid #9b9b9b;
padding: 10px;
color: #ffffff;
}
.guestlist-form-wrapper-input input:focus,
.guestlist-textarea:focus {
outline: none;
border: 1px solid #4990e2;
color: #4990e2;
-webkit-box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.2);
box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">First Name *</label>
<input type="text" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Last Name *</label>
<input type="text" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Email *</label>
<input type="email" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Phone *</label>
<input type="tel" class="inputJs">
</div>
<div class="guestlist-form-wrapper-textarea">
<label class="guestlist-form-label test">Booking note *</label>
<textarea
class="guestlist-textarea inputJs"
placeholder="Type your message"
name="textarea"
id="textarea"
cols="30"
rows="10"
></textarea>

Answer 1

First of all you're using #click event in Vue but blur/focus in the vanilla js.
Clicking on the input several times will toggle focusBlue variable.
Then we have second problem that said variable focusBlue is shared between each input - it's a variable of the vue component that holds those inputs.
You could either store an id/name of the input that is currently selected and toggle class if necessary or (even better) extract those inputs to separate component - so they could be reused elsewhere and toggle logic would be contained within them
<template>
<div>
<input type="text" #focus="selectedInput = 'input1'" #blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input1' }"/>
<input type="text" #focus="selectedInput = 'input2'" #blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input2' }"/>
<input type="text" #focus="selectedInput = 'input3'" #blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input3' }"/>
</div>
</template>
<script>
// ...
data() {
return {
selectedInput: ''
}
}
// ...
</script>
or as a separate component
// input-component
<template>
<div :class="cssClassNames">
<input
type="text"
#focus="focus"
#blur="blur"
:value="value"
#input="$emit('input', $event.target.value)"
/>
</div>
</template>
<script>
// ...
name: 'customInput',
props: ['value'],
data() {
return {
focused: ''
}
}
// ...
methods: {
focus() {
this.focused = true
},
blur() {
this.focused = false
}
}
// ...
computed: {
cssClassNames() {
return {
'focused': this.focused,
'has-error': !this.value, // or other classes
}
}
}
// ...
</script>
an then somewhere in another component
<customInput v-model="valueOfThisInput" />