Если так сильно беспокоит архитектура приложения, то могу посоветовать взглянуть в сторону Nuxt.js. Этот фреймворк будет форсировать структуру приложения, а заодно и общий код-стайл.

Про наименования файлов написано в официальной документации Vue.js. https://vuejs.org/v2/style-guide

Самой первой строчкой вы объявляете переменную "а". Как я понимаю, ее вы и хотите использовать в вашем условии. Если это так, то рассмотрим следующий код:

$("#text-two").css("background",function(a){
    if(a == 1){
      return "red";
    }else{
      return "gray";
    }
  });

Блок IF находится в контексте callback функции, что вы передаете в качестве аргумента для функции css. Рассмотрим поближе эту callback функцию:

function(a){
    if(a == 1){
      return "red";
    }else{
      return "gray";
    }
  }

В javascript есть такое понятие как область видимости переменных. Когда вы создаете функцию, то вместе с ней создается объект LexicalEnvironment, в вашем случае он будет выглядеть так {a: undefined}. Когда вы обращаетесь к переменной внутри функции, первым делом вы обращаетесь к этому объекту. Т.е., ваше обращение к переменной "a" будет выглядеть как LexicalEnvironment.a, в вашем случае это будет не единица, а undefined. Именно поэтому условие не выполняется. Для того, чтобы обратиться к внешней переменной, вам необходимо убрать переменную "a" из аргументов вашей callback функции.

$("#text-two").css("background",function(){
    if(a == 1){
      return "red";
    }else{
      return "gray";
    }
  });

Теперь, когда функция не найдет переменную в LexicalEnvironment, она будет обращаться ко внешнему объекту переменных, именно там и находится переменная "а" со значением "1"

Даже не верится, что решил эту проблему. Все решается бутфлагом:
amdgpu.dc=0