JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <!-- EXERCISE 1: Implement a "uwfirst" filter which transforms the first 
  character of each word to uppercase. Use this filter to transform the 
  paragraph's title with the v-bind directive.
  HINT: Use JavaScript's "split" function to split the message into words. -->
  <p v-bind:title="message | uwfirst">{{ message }}</p>
  
  <!-- EXERCISE 2: Apply the filter from the first exercise to the below 
  paragraph. Then implement a filter which removes any spaces and chain these 
  two filters together. -->
  <p>{{ message | uwfirst | removeSpaces }}</p>
</div>

JavaScript

var vm = new Vue({
	el: '#app',
  data: {
    message: 'hello world!'
  },
  filters: {
  	uwfirst: function(value) {		
    	if (!value) {
      	return '';
      }
      
      var parts = value.toString().split(' ');
      
      var uppercasedWords = parts.map(function(word) {
      	return word.charAt(0).toUpperCase() + word.slice(1);
      });

      return uppercasedWords.join(' ');
    },
    removeSpaces: function(value) {
    	if (!value) {
      	return '';
      }
      
      return value.toString().replace(/ /g, '');
    }
  }
});