JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <!-- EXERCISE 1: Add a computed property which returns an array of strings 
  with the movie name followed by the release year in parenthesis. 
  Then output these strings as an ordered list. -->
  <ol>
    <li v-for="movieName in movieNames">{{ movieName }}</li>
  </ol>
    
  <!-- EXERCISE 2: Make the button below add a movie of your choice to the 
  "movies" data property. Then add a watcher which outputs the movie that 
  was just added in an alert dialog. -->
  <button @click='addMovie("Titanic",1998)'>Add Movie</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	movies: [
    	{ name: 'The Matrix', year: 1999 },
      { name: 'The Matrix Reloaded', year: 2003 },
      { name: 'The Matrix Revolutions', year: 2003 }
    ]
  },
  computed: {
  	movieNames() {
    	return this.movies.map(movie => `${movie.name} (${movie.year})`);
    }
  },
  methods: {
  	addMovie(name, year) {
    	this.movies.push({name, year});
    }
  },
  watch: {
  	movies(movies) {
    	const newMovie = movies[movies.length - 1];
    	alert(`New movie ${newMovie.name} (${newMovie.year}) being added`);
    }
  }
});