w1kenD

Для начала изменить функции:

const handleIndicatorChangeOne = (event) => {
  setValue(values => [Number(event.target.value) || '', values[1]]);
};

const handleIndicatorChangeTwo = (event) => {
  setValue(values => [values[0], Number(event.target.value) || '']);
};

Раз Вы храните массив, то и устанавливайте новым значением массив.
Далее - onChange у TextField необходимо поменять на handleIndicatorChangeOne и handleIndicatorChangeTwo.

RayCast работает на физике, так что у объекта, который ты хочешь "поймать" в рейкаст - должен иметь коллайдер, чтобы задетектить пересечение. Он там есть?
Плюс ты удаляешь hitObject.transform.ObjectToSpawn, а не сам hitObject.collider.gameObject.

Вместо прямого добавления/удаления класса сделайте динамическую привязку в зависимости от текущего значения инпута. Чтобы упростить повторное использование, сделайте компонент: принимает в качестве параметров значение и плейсхолдер, при редактировании пользователем инпута выбрасывает соответствующее событие с новым значением.

props: [ 'value', 'placeholder' ],

<div>
  <input
    :class="value ? 'input_filled' : ''"
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
  <span>{{ placeholder }}</span>
</div>

https://jsfiddle.net/2415wkmg/