JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <!-- EXERCISE 1: Make the below text input update a data property on every 
  "keyup" event. Also output the data property.
  Hint: event.target.value gives access to input value. -->
  <input type="text" v-on:keyup="nameKeyup">
  Output: {{ name }}

  <br><br>
  
  <!-- EXERCISE 2: Make the below text input update the data property from 
  exercise 1, but only when pressing the Control + Enter keys. 
  Hint: The modifier key for the Control key is named "ctrl" -->
  <input type="text" v-on:keyup.ctrl.enter="name = $event.target.value" >
  Output: {{ name }}
  
  <br style="background-color: red;"><br>
  
  <!-- EXERCISE 3: Prevent the below form from submitting. 
  Hint: Prevent the "submit" event on the form. -->
  <form action="" method="GET" v-on:submit.prevent>
    <input type="submit" value="Submit">
  </form>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	name: ''
  },
  methods: {
  	nameKeyup: function(event) {
    	this.name = event.target.value;
    }
  }
});