<div id="app">
  <label for="text">Add text</label>
  <input
    id="text"
    type="text"
    v-model="text"
    @input="transformText"
  >

  <br/><br/>
  <label for="text">Normal text</label>
  <p>{{text}}</p>

  <br/>
  <label for="text">Transformed text</label>
  <p>{{transformedText}}</p>
</div>

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

new Vue ({
    el: '#app',
    data: function() {
      return {
        text: '',
        transformedText: '',
      }
    },
    methods: {
      transformText: function() {
        let inputText = this.splitStringBySpace();

        for (var i = 0; i < inputText.length; i++) {
          if (inputText[i].length <= 1) {
            inputText[i] = this.transformOneLetterWord(inputText[i]);
          } else {
            inputText[i] = this.transformMultipleLetterWord(inputText[i]);
          }
         }

         this.transformedText = inputText.join(' '); 
      },
      
      transformMultipleLetterWord: function(word) {

        return word.charAt(0).toUpperCase() + word.substring(1, word.length - 1) + word.charAt(word.length - 1).toUpperCase();
      },
      
      transformOneLetterWord: function(word) {

        return word.charAt(0).toUpperCase()
      },
      
      lowercaseString: function() {

        return this.text.toLowerCase();
      },
      
      splitStringBySpace: function() {

        return this.lowercaseString().split(' ');  
      }
    },
});